Was*_*ikh 18 html javascript css jquery
我想让最后/第三个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"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Tat*_*nen 23
在jQuery中,你可以尝试这样的事情:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
每当调整窗口大小时,都会修改最后一个div的高度,以便div延伸到页面底部.在页面加载时调用Window的resize方法,以便立即调整div的大小.
如果从窗口的高度减去div的顶部偏移量,则剩下可用的最大高度.如果您有边距,应用了填充边框,则可能需要调整减去的值,例如:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
假设你想要窗口底部的div 30px.
在现代浏览器:设置position: relative在容器上div,position: absolute第三格.然后,您可以将其放置在容器的顶部和底部的同时:top: 0px,bottom: 0px;