Css 如何使DIV占据页面的剩余部分？_Css_Html_Height

Css 如何使DIV占据页面的剩余部分？

css html

Css 如何使DIV占据页面的剩余部分？,css,html,height,Css,Html,Height,我有以下HTML： <html> <body> <h2>Title</h2> <div id='large_div'> blah.. blah.. blah.. </div> </body> </html> 那么，你基本上想要一个表格布局？这是CSS中最糟糕的事情之一。你可能会考虑回到老式HTML表，但是如果你不关心，那么你也可以使用显示\ 属性>代码>表< /> >，表行，最后

我有以下HTML：

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

那么，你基本上想要一个表格布局？这是CSS中最糟糕的事情之一。你可能会考虑回到老式HTML表，但是如果你不关心，那么你也可以使用<代码>显示\ <代码>属性>代码>表< /> >，<代码>表行，最后<代码>表元< /C> > /< 这是一个SSCCE，复制粘贴运行它

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>


所以问题3323454
html{
身高：100%；
}
正文{
显示：表格；
保证金：0；
宽度：100%；
身高：100%；
}
#大分区{
显示：表格行；
宽度：100%；
身高：100%；
背景：粉红色；
}
标题
废话。。废话。。废话。。

同样，这只适用于体面的CSS2浏览器

如果你只想给div一个好的背景，那么有更好的解决方案。

你可以试着在大div上设置一个与h2高度相等的负边距。不幸的是，由于h2高度将根据文本长度和浏览器的不同而变化，因此这并不是非常可靠的代码：

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

不过，使用一点jQuery可以帮您解决问题：

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

如果您知道顶部div的高度（在本例中为h2），则可以尝试以下操作：

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

不幸的是，我不能从我现在的位置来测试这个，所以这可能离我太远了。。。但我相信我以前也用过类似的东西，效果也差不多

你可能会找到你的解决方案-或者至少是一个“足够好”的解决方案，通过玩这些css属性

祝你好运

这将使DIV的高度为其父级的100%。由于父级也有一个，这将导致页面扩展到大于窗口高度的100%。那么应该在上下文中给出整个页面，而不是，div将占据100%的高度以及html和正文标记的高度、边距，如果你不想让div占据页面100%的空间，那么填充也不会干扰你，比如html，body{height:100%；}在标题中，我不太确定我是否理解你的意思，但我想说的是，如果div的高度为100%，它将与页面的高度相同。由于页面中已经有H2，这将扩展页面，使其大于窗口的100%。George是对的。该高度将相对于父元素，而不管其中已存在哪些同级元素。自己跑，用自己的眼睛看。

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }