CODEWITHSUNDEEP
htmlcssmultiple-columns
Xavier Garcia Rubio
Xavier Garcia Rubio

Reputation: 105

How to make my menu div fill full height with no scrolling, but have a content div that scrolls

I have this HTML structure

<div id="header">
    …
</div>
<div id="menu">
    ...
</div>
<div id="content">
    ...
</div>
<div id="footer">
    ...
</div>

And the CSS:

#header {
    height: 100px;
}

#footer {
    border: 1px solid #989898;
    padding-bottom: 0.1em;
    width: 100%;
    height: 2.2em;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

#menu {
    width: 150px;
    float: left;
    ???
}

#content {
    ???
}

Header and footer are OK, but the question comes from menu and content divs:

'menu' div must fill from header to footer, without scrolling

'content' must show scroll if necessary.

What CSS code for them will make it real?

Upvotes: 0

Views: 102

Answers (3)

sultan
sultan

Reputation: 6058

HTML

<div id="wrapper">
  <div id="header">
    ...
  </div>
  <div id="menu">
    ...
  </div>
  <div id="content">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</div>

CSS

#wrapper
{
  position: relative;
  ...
  ...
}

#header
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100px;
}

#footer
{
   position: absolute;
   bottom: 0;
   height: XXXpx;
   display: block;
}

#menu
{
   position: absolute;
   top: 110px;
   left: 0;
   bottom: 0;
   width: 150px;
   height: 100%;
   display: block;
}

#content
{
   position: absolute;
   top: 110px;
   left: 160px;
   width: XXXpx;
   display: block;
}

Upvotes: 0

Anjum
Anjum

Reputation: 277

try this

#menu {
     width: 150px;
     height: 100%;
     overflow-y: auto;
     display: block;
}

Upvotes: 0

Codecraft
Codecraft

Reputation: 8296

My approach would be to wrap 'menu' and 'content' in a wrapper of their own like this:

<div id='contentWrapper'>
    <div id="menu">
        ....
    </div>
    <div id="content">
        ....
    </div>
</div>

Styled like this:

    #contentWrapper {
        width: 1000px;
        overflow: hidden;
        background-color: yellow;
    }

    #menu {
        width: 150px;
        float: left;
        background-color: transparent;
    }

    #content {
        width: 850px;
        float: left;
        background-color: white;
    }

The colours are there to illustrate. Actually, menu is still the same height as it always was, and will stretch around whatever you put in it, but it will always appear to take on the full height of 'content' because you can see through it, and its taking its background colour from the wrapper - which stretches around both menu and content.

Upvotes: 0

Related Questions