Javascript JQuery、CSS全宽元素不工作_Javascript_Jquery_Html_Css

Javascript JQuery、CSS全宽元素不工作

javascript jquery html css

Javascript JQuery、CSS全宽元素不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有个小问题。我使用JQuery将一个元素设置为页面的全宽和全高，并使用CSS中的calc（）函数将该元素填充为其他两个元素。但是有一个问题，当我尝试调整大小时，似乎有一条垂直线，可能是滚动条的空间，尽管没有滚动条，只有滚动条的空间。而且它只在特定情况下发生，通常是在我将窗口调整为较小的大小时。这是我的代码： HTML文件： <!doctype html> <html lang="en-US"> <head> <meta char

我有个小问题。我使用JQuery将一个元素设置为页面的全宽和全高，并使用CSS中的calc（）函数将该元素填充为其他两个元素。但是有一个问题，当我尝试调整大小时，似乎有一条垂直线，可能是滚动条的空间，尽管没有滚动条，只有滚动条的空间。而且它只在特定情况下发生，通常是在我将窗口调整为较小的大小时。这是我的代码：

HTML文件：

<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
        <link rel="stylesheet" type="text/css" href="css/colors.css"/>
        <script src="js/jquery.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <div>
            <section>

            </section>
            <nav>

            </nav>
        </div>
    </body>
</html>

JS文件：

$(document).ready(function() {
    $("div").width($(window).width());
    $("div").height($(window).height());
});

$(window).resize(function() {
    $("div").width($(window).width());
    $("div").height($(window).height());
});

关于这一点的总体想法是，我希望导航位于右侧，固定宽度为300px，我希望数据显示在左侧

提前感谢您的帮助

编辑：

我找到了更好的方法，因为这些元素的高度始终与窗口相同，所以我放置了overflow:hidden for body，现在黑线将永远不会出现…

尝试另外将

div

min width

设置为

calc（100%）

jsfiddle

此外，我也尝试过做同样的事情，但针对宽度和高度的单个元素（section和nav）（使它们的高度等于$（window）。height（）和width to$（window）。width（）-300代表section）并删除div元素，同样的事情发生了。calc是实验性的，并不是所有浏览器都完全支持，值得注意的是，当一个子元素具有相同的属性并且许多webkit属性需要-webkit-vendor前缀时，IE会出现问题。查看添加供应商前缀是否解决了您的问题。（还要注意，它在MDN文档中被列为buggy）我尝试过在没有calc（）的情况下使用JQuery设置宽度和高度。。。同样的事情也发生了…太棒了，这解决了问题，但我仍然想知道为什么会发生这种情况。。。如果你能启发我，那就太好了……：）在

css

加载之前

jQuery

加载

calc（）

设置

最小宽度：包含元素的calc（100%）

，继续计算提供的表达式

100%

，与

事件无关。resize（）

事件<代码>浮动：左设置为启用

nav

元素不会“接触其包含框的边缘或另一个浮动元素。”；同级

部分

设置

浮动：左

？请参见在

minwidth:300px

不计算

minwidth

之间的

resize

，包装浮点元素？

$(document).ready(function() {
    $("div").width($(window).width());
    $("div").height($(window).height());
});

$(window).resize(function() {
    $("div").width($(window).width());
    $("div").height($(window).height());
});

div {
    min-width:calc(100%);
}