我有个小问题。我使用 JQuery 将元素设置为页面的完整宽度和高度，并使用 CSS 中的 calc() 函数用其他两个元素填充该元素。但是有一个问题，当我尝试调整大小时，似乎有一条垂直线可能是滚动条的空间，尽管没有滚动条，只有它的空间。而且它仅在特定情况下发生，通常是当我将窗口调整为较小尺寸时。这是我的代码:http://jsfiddle.net/yr4uz3p5/ .
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>
CSS 文件:
* {
margin: 0px;
padding: 0px;
color: #00ff00;
background-color: #000000;
}
section {
min-width: 300px;
width: calc(100% - 300px);
height: 100%;
background-color: blue;
float: left;
}
nav {
width: 300px;
height: 100%;
background: red;
float: left;
}
div {
min-width: 300px;
}
body {
min-width: 300px;
}
JS文件:
$(document).ready(function() {
$("div").width($(window).width());
$("div").height($(window).height());
});
$(window).resize(function() {
$("div").width($(window).width());
$("div").height($(window).height());
});
关于这个的一般想法是我希望导航位于右侧，固定宽度为 300 像素，我希望数据显示在左侧。
在此先感谢您的帮助!
编辑:
我找到了更好的方法，因为这些元素的高度始终与窗口相同，我将 overflow: hidden 放置在 body 中，现在黑线将永远不会显示...
最佳答案
尝试另外将 div min-width 设置为 calc(100%)
div {
min-width:calc(100%);
}
jsfiddle http://jsfiddle.net/yr4uz3p5/1/
关于javascript - JQuery，CSS 全宽元素不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29996321/