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

这里是标记我的CSS规则一起：如何让div的高度占据所有空间？

<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占据所有可用的高度？就像页面的最底部一样。截至目前，它看起来像这样 enter image description here

我想看到的是黑色的DIV占用所有可用的高度在页面

来源

2012-08-29 KyelJmD

给我们您的css请 –

您是否读过整个问题？ – KyelJmD

我的小知识从给出的文章得出结论：所有父母的身高应该是100％，并且孩子的身高应该是100％，因为默认高度是任何元素的“自动”。 http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm – owaishanif786

是的，它可以做到的。检出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％;如果父元素不是浏览器的高度，则不起作用。）

来源

2012-08-29 03:43:58

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

回答

相关问题