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 make Media Query work when IE loads?

    How to tell what is the right css line to apply in nested classes

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How to center a textarea using CSS?

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]

    How do align texts in the child div

    How to make css flex box row auto resizing horizontally with image

    How To Do A Webkit Slide Cover Page Transition

    How can I format my css text so that the result is in 2 columns?

    how to make an empty span collapse

    How to use CSS to change icon color

    How to keep an element fixed top within another element?

    CSS: how to put one image and one block with two

    in one line not using float

    How do you add pseudo classes to elements using jQuery?

    How to float div up?

    How to set size of SVG image in :before pseudo-class?

    How to change css for span in span?

    How to increase the gap between text and underlining in CSS

    How to add tags/images on javascript fetched textarea data?

    How to make the height of a div within a master page expand in a content page?

    How do you find the largest font size that won't break a given text?

    How to access CSS children properly?

    How to display a table with a span at its side?

    How to Center-Justify links in CSS?

    How do I modify IE Gradient CSS to use height and a third color?

    How to load CSS using jquery

    How can I allow resizable() to increase size beyond initial size?

    Using CSS, how do you anchor an element to a baseline and size it based on another “pinned” element?

    How to use “css” in the “jsp” in Spring MVC project?

    How to get use the functionality same as “-webkit-appearance” in firefox?