Question

我正在尝试将我的网站优化为不同的屏幕和窗口大小。我希望div的内容占用浏览器高度的100％，而不是更多，这样用户就不必向下滚动了。我不知道如何实现这一点，我试过这个

$(window).on('load resize', function(){
    $('.container-narrow').width($(this).width());
    $('.container-narrow').height($(this).height());
)};

但这似乎不起作用，内容仍然超过了浏览器的高度。我必须结束滚动

Answer 1

CSS会在调整大小时重新计算。

<html>
<head>
<style>
body, html {
 height: 100%;
 margin: 0px;
 padding: 0px;
}
.body {
 height: 100%;
 margin-bottom: -100px;
}
.header {
 height: 100px;
 background-color: #CCCCCC;
 text-align: center;
}
.content {
 text-align: center;
}
.footer {
 height: 100px;
 text-align: center;
 background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
    <div class="header">
    This is the header.
    </div>
    <div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>

动态调整Div及其内容以适应浏览器高度

1 个答案: