How to make the height of the div take all the space?


Tags: css,navigation,twitter-bootstrap,uinavigationbar

Problem :

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.

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 enter image description here

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



Solution :

Yes it can be done. Check out this example JSFiddle.

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>

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.

The CSS is as follows:

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%;
}​

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


    CSS Howto..

    How to get image info from css into MasterPage'gridview?

    How to fix the height of this div

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    How do I make the HTML Slider with CSS stay in the box?

    How to write page specific CSS in backbone js

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to set height and width of video element in percent

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    Understanding how CSS clear:both is supposed to work

    How to apply css selector in ZK

    How to make this geometrical “translation” effect with javascript?

    How to create color custom scrollbar in pure css? [closed]

    How to DRY Sass code using variables?

    How to remove unwanted whitespace css/html

    How to make a Elastic Vertical Layout?

    How to change or disable the alternating background colors in Google Prettify

    How to disable flow around elements in table (CSS)

    How to put text on the center of a circle using CSS

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to code vertical banner

    How do I get my Bootstrap webpage to have a full width

    How to implement icon fonts like github.com

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How can I show entered password using tooltip on input type=password in bootstrap?

    Asp.Net how to apply a css style to all the control of it's kind

    CSS - How can I center my navigation bar?

    How to get two results with one button using CSS & Jquery

    How can I apply an existing CSS class style to a dynamically created div?

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?