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

Question

这是我的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占据页面中的所有可用高度。

- KyelJmD

---

你有读完整个问题吗？ - KyelJmD

从这篇文章中，我的一点见解是：所有父元素的高度应为100％，子元素的高度也应为100％，因为默认情况下，任何元素的高度都是“自动”的。 http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm - owais

Answer 1

可以做到。请查看这个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），并给下一个 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和body实际上占用了可用高度的100%。（也就是说，在#navbar上的100%是父元素的高度；如果父元素不是浏览器的高度，则无法正常工作。）

- Roddy of the Frozen Peas