开发者

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?


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.


try this

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


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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜