在窗户上安装div
在窗户上安装div
提问于 2019-05-24 00:43:37
我想在窗口内放置2个div（一个在顶部，另一个在下面），但是当我使用jQuery对我的脚本进行计算时，窗口溢出。我需要以下方式：
我有以下js和html：
$(document).ready(function() {
on_resize();
$(window).resize(on_resize);
});
function on_resize() {
$(".container").height($(window).height());
$(".top").height($(window).height() - $(".bottom").outerHeight());
}
<body>
<div class="container">
<div class="top">
A big top container
</div>
<div class="bottom">
The bottom container
</div>
</div>
</body>
当窗口调整大小时，计算正确完成，并且没有溢出。文档加载时有没有办法正确计算？
我已经尝试过使用$（window）.on（“load”）而不是$（document）.ready（），但它仍然会进行错误的计算。
回答 1
Stack Overflow用户
发布于 2019-05-24 10:22:52
只需添加html, body { margin: 0; }以防止body大多数浏览器中的默认边距：
$(document).ready(function() {
on_resize();
$(window).resize(on_resize);
});
function on_resize() {
$(".container").height($(window).height());
$(".top").height($(window).height() - $(".bottom").outerHeight());
}
html,
body {
margin: 0;
height: 100%;
}
.container {
background: blue;
color: white;
}
.bottom {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="top">
A big top container
</div>
<div class="bottom">
The bottom container
</div>
</div>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003148
复制相关文章
相似问题
腾讯云开发者
