这是我的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占用了页面中所有可用的高度
答案 0 :(得分:5)
是的,可以做到。查看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)并给下一个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%是父元素高度的100%;如果父元素不是浏览器的高度,则它不起作用。)