gpt4 book ai didi

javascript - 如何将 100% 高度应用于 div?

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:20 25 4
gpt4 key购买 nike

我想让最后一个/第三个 div 填充整个剩余空间。我给出了 100% 的高度,但是滚动条即将出现,我不想显示它。我有相同的 CSS 解决方案。如果不能通过 css 实现,那么 jQuery/JS 解决方案就可以了。

<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd">&nbsp;</div>
<div style="height:25px;background-color:#eee">&nbsp;</div>
<div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
</div>
</body>
</html>

最佳答案

在 jQuery 中,您可以尝试这样的操作:

$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});

无论何时调整窗口大小时,都会修改最后一个 div 的高度,以便该 div 延伸到页面底部。在页面加载时调用 Window 的调整大小方法,以便立即调整 div 的大小。

如果从窗口高度中减去 div 的顶部偏移量,则剩下可用的最大高度。如果您应用了边距、填充边框,则可能需要调整减去的值,例如:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

假设您想要距离窗口底部 30px 的 div。

关于javascript - 如何将 100% 高度应用于 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1818467/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com