如何强制DIV向下延伸到屏幕底部? [英] How do I force a DIV to extend down to the bottom of the screen?
问题描述
CSS可能无法做到这一点，但也许我错了:
This is probably not possible with CSS, but maybe I'm wrong:
我有一个这样的文档结构:
I have a document structure like this:
BODY
DIV[A]
DIV[B]
DIV [A]是 position:absolute ，固定为，并在屏幕上居中.没有高度设置.
DIV[A] is position:absolute with fixed with and centered on screen. It has no height setting.
DIV [B]是 position:absolute 和 top:300px .这是实际的内容DIV.在其中，我将所有内容定位为position:absolute.因为我爱职位:绝对.它提供了对定位的完全控制.没有丑陋的文字流头痛...太好了.
DIV[B] is position:absolute with top:300px. This is the actual content DIV. Inside that, I position everything with position:absolute. Because I love position:absolute. It gives full control over positioning. No ugly text flow headaches... it's so nice.
好的.但是现在的问题是:DIV [B]始终只是我告诉它的 height .现在，也许有一个很酷的CSS技巧可以将其始终拉到触摸浏览器视口的底部?
Ok. But the problem now: DIV[B] is always only that height what I tell it to be. Now, maybe there's a cool CSS trick that would pull it always down to touch the bottom of the browser viewport?
推荐答案
要将高度设置为动态地成为窗口高度-DIV [A]的高度，您将不得不使用JavaScript/jQuery并继续使用 SetTimeout .
To set the height to dynamically be the window height - DIV[A]'s height, you'll have to use JavaScript/jQuery and keep calling it with a SetTimeout.
或者，如果满足您的需要，您可以将DIV [B]设置为 position:fixed;.bottom:0px;
Alternately, if it suits your needs, you can set DIV[B] to be position:fixed; bottom:0px;
<body onload="setupLayout();" >
...
<script language="javascript" type="text/javascript">
// ACTIVITIES TO RUN FOR THE PAGE
function setupLayout() {
setInterval('adjustLayout();', 1000);
}
// ADUST THE MAIN CONTAINER (content panel) LAYOUT
function adjustLayout() {
try {
var divB = $get('divB');
var divAHeight = 20px;
divB.style.height = document.body.clientHeight - divAHeight ;
}
catch (e) { }
}
</script>
</body>
这篇关于如何强制DIV向下延伸到屏幕底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
