如何让 div 的高度占据所有空间？

Posted 2023-04-13

【中文标题】如何让 div 的高度占据所有空间？

【英文标题】：How to make the height of the div take all the space?

【发布时间】：2012-08-23 14:58:47

【问题描述】：

这是我的 css 规则和标记：

<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
    <div class='navbar-inner'>
        <div class='container'>
        <ul class="nav nav-list">
            <div>   
            <li <?php if($page == 'upload_track') echo "class = \"active\""; ?>><a href = "#">Upload a new Track</a></li>
            <li><a href = "#">View all blog post</a></li>
            <li><a href = "#">View all tracks uploaded</a></li>
        </div>
        </ul>
    </div>
    </div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">

到目前为止，我正在将它们设为内联样式，以便我可以轻松更改它们。因为切换文本编辑器对我来说有点麻烦。

如何使该 div 占据所有可用高度？就像页面的最底部一样。截至目前，它看起来像这样

我想看到的是黑色的div占据了页面中所有的可用高度

【问题讨论】：

您阅读了整个问题吗？

我的小知识从给定的文章中得出：所有父母的身高应该是 100%，孩子的身高也应该是 100%，因为默认情况下任何元素的高度都是“自动”的。 webdesign.about.com/od/csstutorials/f/…

【参考方案1】：

是的，它可以做到。查看this example JSFiddle。

基本上我将您的 html 更改为：

<div id="navbar">
    <div class='navbar-inner'>
        <div class='container'>
            <ul class="nav nav-list">
                <div>   
                    <li><a href = "#">Upload a new Track</a></li>
                    <li><a href = "#">View all blog post</a></li>
                    <li><a href = "#">View all tracks uploaded</a></li>
                </div>
            </ul>
        </div>
    </div>
</div>

基本上我所做的只是删除最外层的 div（上面只有 style="height: 100%" 的那个）并给下一个 div 一个 id。

CSS如下：

html, body  height: 100%; 

#navbar  
    /* this was moved from being an inline style in the div: */
    width:220px; margin-left: 200px;font-size:16px;
    height: 100%;
​

基本上，为了使导航栏条占用 100% 的高度，您需要确保 html 和正文实际上占用 100% 的可用高度。 （也就是说，#navbar 上的 100% 是父元素高度的 100%；如果父元素不是浏览器的高度，则它不起作用。） ​