CSS Div Layout stretch to fit width and height

Question

I am trying to make a phpBB theme, but am having trouble setting up the DIV's the way I envisioned the page to be.

This is what I am looking to do.

http://imgur.com/n6eZbsT (image to help with understanding)

This is what I had so far.

index.html

<body>
<div id='container'>
    <div id='header'>
    </div>

    <div id='sidemenu'>
    </div>

    <div id='content'>
    </div>
 </div>

</body>

css.css

 *{
    padding: 0px;
    margin: 0px
    }

 #header {
    width:100%;
    height:50px;
    background-color:#6FF;
    }

 #sidemenu {
    display: block;
    position:absolute;
    width:100px;
    height:100%;
    background-color:#6F6;
    }

The problem with this is that the sidemenu DIV overflows to the bottom of the page and creates a scrollbar.

I have tried looking for a solution, and only managed to get the overflow to go away by using bottom:0px; inside the sidemenu css

But this pushes the header to the right, and sidemenu to the top left corner like this..

http://imgur.com/LKk9VtF

I am stuck here, css gives me a huge headache ahaha. Can anyone please help me with a solution?

Thank you so much!

Answer 1

You should use height:calc(100% - 50px); top:50px; height:calc(100% - 50px); top:50px; for your sidemenu. Run the snippet bellow.

  *{ padding: 0px; margin: 0px } #header { width:100%; height:50px; background-color:#6FF; } html,body,#container{height:100%;} #sidemenu { display: block; position:absolute; width:100px; height:calc(100% - 50px); top:50px; background-color:#6F6; }

 <div id='container'> <div id='header'> </div> <div id='sidemenu'> </div> <div id='content'> </div> </div>

CSS Div Layout stretch to fit width and height

Question

1 answers

solution1
1 ACCPTED 2014-09-21 00:02:45

CSS Div Layout stretch to fit width and height

Question

1 answers

solution1 1 ACCPTED 2014-09-21 00:02:45

solution1
1 ACCPTED 2014-09-21 00:02:45