14

Here is the situation, I have this html:

<div id='main'>
    <div id='menu'>
        Menu Items Here
    </div>
    <div id='cont'>
        Content Here
        <div id='footer'>Some Footer</div>
    </div>
</div>

CSS here:

html, body {
   height: 100%;
   width : 100%;
   margin: 0;
   padding: 0;
}

#main{
    overflow : auto;
    background-color: yellow;
    width : 100%;
    min-height : 100%;
}

#menu {
    background-color: red;
    float : left;
    width : 300px;
}

#cont {
    margin-left : 300px;
    float : right;
    background-color: orange;
    width : 100px;
    min-height : 100%;
    height: auto !important; /*min-height hack*/
    height: 100%;            /*min-height hack*/
}

What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content.

Any help would be appreciated.

Note: The width size is just temporary for now.

Thanks!

3
  • 1
    Not sure what you're trying to achieve. You want min-height to be 100% of what? May 10, 2014 at 15:54
  • @CameronMartin, basically i want the height of #cont to fit the screen if the content is small. and will extend if has longer content
    – Eddie
    May 10, 2014 at 16:04
  • @YogeshSaroya you dont have a grasp of what happened dont you? It is not the grammar or word of choice . It is the effort we are looking on your question.
    – Eddie
    Apr 16, 2019 at 10:52

3 Answers 3

11

This may work:

#main{
    height : 100%;
}
#cont {
    min-height : 100%;
    /* Without the hacks */
}
3
  • 1
    I tried this but if the content of #cont is longer than the window, the content shows but the style is still 100%. (the overflow has no style.)
    – Eddie
    May 10, 2014 at 16:00
  • I can't reproduce the problem. Tried in Chrome and IE (10 - 8).
    – agrm
    May 10, 2014 at 16:10
  • 1
    Future readers - depending on your circumstances, you may need to add html, body{height:100%}, as demonstrated below by Cameron Martin.
    – cssyphus
    Dec 16, 2015 at 0:33
3

Try this http://jsfiddle.net/W6tvW/2/

<div id='main'>
    <div id='menu'>
        Menu Items Here
    </div>
    <div id='cont'>
        Content Here
        <div id='footer'>Some Footer</div>
    </div>
</div>

html, body {
   height: 100%;
   width : 100%;
   margin: 0;
   padding: 0;
}

#main{
    overflow : auto;
    background-color: yellow;
    min-height : 100%;
    position: relative;
}

#menu {
    background-color: red;
    float : left;
    width : 300px;
}

#cont {
    margin-left : 300px;
    background-color: orange;
    min-height : 100%;
    position: absolute;
    right: 0;
}

If you want the footer to stay at the bottom:

#footer {
    position: absolute;
    bottom: 0;
}
-2

you are using min-height:100% which means 'make the minimum height of this box be the height of it'

you would be better using a pixel value (e.g., make #menu and #cont min-height:400px;)

if you want to make them both the height of the tallest one, then you'll need some jquery:

if (jQuery('#menu').height() < jQuery('#cont').height()) {
    // the cont is bigger than the menu
    jQuery('#menu').css("height", jQuery('#cont').height());
}
2
  • 4
    Not true - min-height:100% would mean make the minimum height the height of the containing block, according to w3schools.
    – Greg Bell
    Mar 29, 2015 at 1:44
  • @GregBell MDN > w3schools Mar 16, 2017 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.