如何让div的高度占据全部空间？

这是我的 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;">

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

How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this

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

是的，这是可以做到的。查看这个例子 JSFiddle http://jsfiddle.net/mKPcE/.

基本上我将你的 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 和 body 实际上take达到可用高度的 100%。 （也就是说，100%#navbar是父元素高度的100%；如果父元素不是浏览器的高度，则不起作用。） ​