Left menu with Height and Min-height 100%

Question

Thanks for your patience. I need to make a left menu with height and min-height 100% For example.

If the website doesn´t have a lot of content, the left menu should go to bottom If the website has a lot of content, the left menu should go to bottom also, but with scrollbar...

The left and right divs always must be 100%

Image Example http://www.diegomenezes.com/stack.jpg

It could use HTML5

Here ou can see the JSFiddle link http://jsfiddle.net/6gSYn/

And here my code!

    <div id="container">
    <div id="top"><h1>TESTE</h1></div>
    <div id="content">
        <div id="left">
        <ul class="lista">
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>                
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
        </ul>
        </div>
        <div id="right">
        <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>        

            <div id="footer">
            <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>
            </div>
    </div>
    </div>    

</div>

Here the CSS

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
}
html {
    height: 100%;
}

body {
background: darkgrey;
height: 100%;

}

#container {    
height: 100%;
position: relative;
}

#top {
height: 100px;
width: 100%;
background-color: black;
color: white;
float:left;
}

#content {
background: darkgrey;
width:100%;
min-height: 100%;
height:100%;
}

#content ul.lista {
width: 250px;
display: inline-block;
vertical-align: top;
background: lightgrey;
color: red;
bottom: 0;
}


#right {
width: 1000px;
color: blue;
display: inline-block;
padding: 10px;
min-height: 400px;
}


#footer {
color: black;
height: 50px;
text-align: center;
width: 100%;
}

It could be! But if it has just some content it should go to bottom also... but I tried everything and nothing worked! — Diego Menezes, Apr 22 '13 at 13:55
So you want the menu on the bottom? at all time? And why at the bottom? and not top? — DiederikEEn, Apr 22 '13 at 13:56
Yes! The menu should go to the end of the page. Starting at the top. — Diego Menezes, Apr 22 '13 at 13:57
http://jsfiddle.net/6gSYn/2/ and another one http://jsfiddle.net/6gSYn/3/ — Morpheus, Apr 22 '13 at 13:57
hello @Morpheus thanks for your help, but in this fiddle the menu is not going to the end of the page! =( — Diego Menezes, Apr 22 '13 at 13:59
@Morpheus http://jsfiddle.net/6gSYn/2/ this one?! I can´t find the working version — Diego Menezes, Apr 22 '13 at 14:02
The left menu is not going to the bottom yet... even on the example 3 ... tested on firefox and chrome @morpheus — Diego Menezes, Apr 22 '13 at 14:06
@Morpheus I get the impression that the OP wants the menu bar to be the taller of: the height of the page or the height of the content - eg it will always reach the bottom of the scrollable area but won't shrink if content is shorter than that (nor force scroll bars if the content doesn't require them) — Basic, Apr 22 '13 at 14:06
@Morpheus I saw the last update you made! But it´s creating scrollbars on X and Y... even with a little content. :( — Diego Menezes, Apr 22 '13 at 14:11
Sorry @Morpheus ... but it didn´t work with a lot of content... the left menu just don´t go to the bottom anymore. =( Thanks for you patience with this issue! — Diego Menezes, Apr 22 '13 at 14:23
Possible repeat of http://stackoverflow.com/questions/15666834/how-to-create-a-gmail-like-layout-with-twitter-bootstrap — Rajender Joshi, Apr 22 '13 at 19:46

score 0 · Answer 1 · answered Apr 22 '13 at 14:21

0

Try this and tell worked for you or not jsfiddle
CSS:

#right {
    overflow-y: scroll;
}

td {
    vertical-align:top;
}

answered Apr 22 '13 at 14:21

Navand

446
4
11

Thanks @navand that is an approach that I have tried... but it´s not the best one to do... If I can´t find a solution will try this one! – Diego Menezes Apr 22 '13 at 14:26
You don't want to use ``?
– Navand Apr 22 '13 at 14:34

score 0 · Answer 2 · answered Apr 22 '13 at 18:25

I don't think there is a pure css solution of this problem. There might be some ticks which are not easy to understand and implement. Rather you can solve your problem using little javascript or precisely jQuery.

lets assume the code block as follows-

<div id="mainContainer">
    <div id="leftContainer">
        <p>Some contents which you want to put in the left blovk</p>
    </div>
    <div id="rightContainer">
        <p>Some contents which you want to put in the right blovk</p>
    </div>
</div>

now to make these two div leftContainer and rightContainer having same width you need to add some js-

$(document).ready(function(){
// making the height of the right container same as the left one

    leftContainerHeight = $('#leftContainer').outerHeight();
    $('#rightContainer').height(leftContainerHeight);

//or

// making the height of the right container same as the left one

    rightContainerHeight = $('#leftContainer').outerHeight();
    $('#leftContainer').height(rightContainerHeight);

});

This js will set the height of the container of your interest dynamically. But one fallback is if your dom is really heavy or visitor has a slow connection, then there will occur a height jump. That means you'll see the height of the dependent container will increase sharply as soon as your page completed loading. To avoid this there you can use a loading gif image or simply a fadeIn effect of the contents. You can learn more about the fadeIn effect here

Here's the fiddle.

http://jsfiddle.net/6gSYn/9/

If you need more assistance here please feel free.

Thanks.

score 0 · Answer 3 · answered Apr 22 '13 at 19:40

In order for height:100% to function properly in all browsers your parent element would need to have a height specified to a pixel height. This is complicated as sometimes your content will need more room than the specified height. You could use javascript to get around this problem but that is not always the best solution.

Left menu with Height and Min-height 100%

3 Answers3