css webapp窗口大小调整导致div对于窗口太大

Question

请参阅代码链接...

使用这段代码，页面在调整大小时也会给我适当的宽度。但高度必须通过jQuery进行调节。这给了我一个div，其中的高度比我想要的100%稍大一点，并且在调整页面高度时不会改变……

Here is the code: http://jsfiddle.net/T6Uv4/

Answer 1

这取决于你想要做什么。但是，如果您将position: absolute;更改为position: fixed;，它应该会像页面一样调整大小。

但是，如果您在页面上有滚动，那么您可能不希望它停留在页面上的同一位置。

position: absolute;的问题是它不是动态的，所以如果你改变浏览器的大小，它会保持页面第一次加载时的原始大小。如果在更改浏览器后对页面执行CRTL+F5操作，则内容将弹出到position: absolute;应在的位置

这是一个position: relative; Jsfiddle

这是你的jquery代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  var windowHeight = $(window).height();
    $('#content').css({'height':windowHeight+'px'});
});
</script>

这是你要找的更多东西吗？

新的jsfiddle更新：updated fiddle

您需要删除正文填充和边距，以及容器周围的边框。

Answer 2

我试图解释这种行为：

如果你的屏幕分辨率是1000px (仅举个例子)，那么80%就是800px。但是如果你将页面调整到500px宽，80%会捕捉到400px。400px + 210px margin= 610px (不是500px!)

解决方案：尝试将左边的margin和你的padding放在成比例的值或em单位中，以使边距在内容中调整大小。

这是一个fiddle。

请注意，当您多次调整屏幕大小时，滚动条会再次出现。将边框改为em单位可以解决这个问题。完美的解决方案是在整个页面中不设置固定值。

对于更复杂的大小调整，可以使用Mediaqueries