如何使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;">

截至目前,我正在使它们成为一种内联样式,以便我可以轻松地更改它们.因为转换texteditors对我来说是一件麻烦事.

我怎么能让那个div占用所有可用的高度？就像页面底部一样.截至目前它看起来像这样

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

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一个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%的可用高度.(也就是说,100%on #navbar是父元素高度的100%;如果父元素不是浏览器的高度,则它不起作用.)