CSS：告诉块元素填充高度

这似乎应该是世界上最简单的事情，但我有困难。我开始认为我对CSS的了解并不像我想的那么多，或者CSS的设计比我想象的要糟糕得多。CSS：告诉块元素填充高度

我有一个页面。在顶部，有任意数量的标记。然后是块元素。我想要做的就是让这个块元素的高度延伸到窗口的底部。

请参阅http://jsfiddle.net/vHVeC/4/。它很接近，但最后一个块元素超出了浏览器的可见区域，创建了滚动条。没有内容应该超出视口的尺寸（即不应该有滚动条）。

我该如何做到这一点与不必使用JavaScript？

2010-11-03 SnickersAreMyFave

[Help with CSS - 获取元素以填充剩余垂直空间的100％]的可能重复（http://stackoverflow.com/questions/2793976/help-with-css-getting-an-element-to填充100剩余的垂直空间） – Jason 2010-11-03 23:34:47

这是不一样的。虽然标题是相似的，但情景不是当你通读这个问题时，而接受的答案不能回答我的问题。 :) – SnickersAreMyFave 2010-11-03 23:45:00

只与表.. – 2010-11-03 23:45:06

-3

这是如何使用一个表（它是纯粹的CSS）做到这一点：

http://vidasp.net/tinydemos/table-layout.html

来源

2010-11-04 00:22:39

该链接已停用，但副本位于archive.org https://web.archive.org/web/20110810063955/http://vidasp.net/tinydemos/table-layout.html – jcubic 2014-08-07 15:55:04

显然，CSS has massive troubles finding heights。宽度，无后顾之忧。

使用JavaScript，你会去：

//Grab div element 
var obj = document.getElementById('theDiv'); 

//Enable sizing 
obj.style.position = 'relative'; 

//Force to window 
obj.style.height = document.documentElement.clientHeight+'px';

顺便说一下，在你的小提琴，在div上述明文节点被抵消低于div。它发现身高的100％，但后来被撞倒，造成了滚动条。在CSS中修复此问题的方法是position:absolute;left:0;top:0，将其锁定就位。

另请注意，在任何这些情况下，如果您最终滚动（例如达到150％），则会以100％的比例看到您的div的底部边缘。

来源

2010-11-04 00:15:52 Ben

你打css box model problem。一个快速和肮脏的解决方案是设置overflow: hidden属性以防止滚动条，但你应该非常小心这样做。您需要确保您的内容适合屏幕，因为任何延伸到块元素之外的内容都将无法被用户访问。

来源

2010-11-04 00:24:22

CSS：告诉块元素填充高度

回答

相关问题