CODEWITHSUNDEEP
htmlcss
Michele M.
Michele M.

Reputation: 117

Scrollable Div in a 100% height wrapper

Im trying to complete this layout but i have a problem trying to make the div #content scrollable (vertically), without making the whole page move.

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title>Test Layout</title>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <div id="sidebar">
                <div id="buttonsContainer">
                </div>
            </div>
            <div id="content">
            Scrollable content here
            </div>
        </div>
    </div>
</body></html>

CSS:

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

body {
    background-color: #333;
}

body, html , #wrapper {
    height: 100%;
    overflow: hidden;
}

#wrapper {
    width: 986px;
    margin-right: auto;
    margin-left: auto;
    background-color: #2A2A2A;
}

#main {
    background-color: #FFF;
    width: 970px;
    margin-right: auto;
    margin-left: auto;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #000;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #000;
    height: 100%;
    position: relative;
}

#sidebar {
    height: 100%;
    width: 25%;
    float: left;
    background-color: #111;
    position: absolute;
}

#content {
    margin-left: 25%;
    overflow: auto;
}

#buttonsContainer {
    margin-top: 40%;
    height: 300px;
    width: 100%;
    position: relative;
    background-color: #F00;
}

You can see this layout hosted here Any suggestion?

Upvotes: 1

Views: 1867

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it. Use absolute positioning to stretch your #content block to fill the #wrapper parent block while leaving a 25% left margin.

Remove the overflow: hidden from the wrapper block and you have the effect that you want.

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #333;
}
body,
html,
#wrapper {
  height: 100%;
}
#wrapper {
  width: 986px;
  margin-right: auto;
  margin-left: auto;
  background-color: #2A2A2A;
}
#main {
  background-color: #FF0;
  width: 970px;
  margin-right: auto;
  margin-left: auto;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #000;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #000;
  height: 100%;
  position: relative;
}
#sidebar {
  height: 100%;
  width: 25%;
  float: left;
  background-color: #111;
}
#content {
  position: absolute;
  top:0;
  right: 0;
  left: 25%;
  bottom: 0;
  background-color: lightgray;
  overflow: auto;
}
#buttonsContainer {
  margin-top: 10%; /* small value for demo only */
  height: 100px;
  width: 100%;
  position: relative;
  background-color: #F00;
}
<div id="wrapper">
  <div id="main">
    <div id="sidebar">
      <div id="buttonsContainer">
      </div>
    </div>
    <div id="content">
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>end
    </div>
  </div>
</div>

Upvotes: 1

ememem
ememem

Reputation: 316

try this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title>Test Layout</title>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <div id="sidebar">
                <div id="buttonsContainer">
                </div>
            </div>
            <div id="content">
                 <div class="holder">
                  Scrollable content here
                 </div>
            </div>
        </div>
    </div>
</body></html>

and css:

#content .holder {
  display: block;
  overflow: hidden; 
}

Upvotes: 0

hugorut
hugorut

Reputation: 151

What you need to do is give the content div a defined height and then specify overflow to scroll.

This should work:

#content {
      margin-left: 25%;
      height: 100%;
      overflow-y: scroll;
}

Upvotes: 1

Related Questions