如何使div的高度占据所有空间? [英] How to make the height of the div take all the space?

问题描述

这是我的CSS规则以及标记:

Here is my css rule together with the markup:

<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;">

到目前为止，我正在将它们制作为内联样式，以便我轻松更改它们.因为切换文本编辑器对我来说很麻烦.

as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.

我将如何使div占用所有可用高度?就像页面的底部一样.截至目前，它看起来像这样

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

what I wanted to see is that the black div takes up all the available height in the page

推荐答案

是的.查看此示例JSFiddle .

基本上，我将您的HTML更改为此:

Basically I changed your HTML to this:

<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.

Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an 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％；如果父元素不是浏览器的高度，则它将不起作用.)

Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.) ​

这篇关于如何使div的高度占据所有空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！