CODEWITHSUNDEEP
htmlcss
anivas
anivas

Reputation: 6547

Scrollable div content area with fixed header

For the below html I get a browser scrollbar, While I would like a scroll bar in the blue content area and the green header to stay fixed. Tried overflow:auto doesn't help.What am I getting wrong here ?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
  </head>
<body style="width: 100%; height: 100%; padding: 0; margin: 0">
    <div style="background: green; font-size: 20px; height: 100px">
      Header 
    </div>
    <div style="background: blue; overflow: auto;">
       <div style="height: 1000px">
         content
       </div>
    </div>
</body>
</html>

Upvotes: 2

Views: 14361

Answers (3)

Jagrati
Jagrati

Reputation: 12222

You just have to give a fixed height to your blue background div.

<div style="background: blue; overflow: auto; height:350px;">

Jsfiddle example: https://jsfiddle.net/jagrati16/ennj1xu3/

Upvotes: 0

Alfred Alfizo Mosima
Alfred Alfizo Mosima

Reputation: 721

Here is a good Example of what your looking for. https://jsfiddle.net/letalumil/zVzD6/

  <html>
  <header>
  </header>
  <body>
  <div id="wrapper">
  <div>header</div>
  <div id="content">
    <div class="scroll">
        <div class="temp">content</div>
    </div>
    </div>
   </div>
   </body>
   </html>

Your css

 html, body {
height: 100%;
 }
#wrapper:before {
content:'';
float: left;
height: 100%;
}
 #wrapper {
height: 100%;
 }
 #content {
position: relative;
background: green;
}
#content:after {
content:'';
display: block;
clear: both;
}
   .scroll {
   position: absolute;
   height: 100%;
   width: 100%;
   overflow: auto;
    }
   .temp {
  height: 1000px;
  }

Upvotes: 1

alesc
alesc

Reputation: 2782

You should try something like this: http://jsbin.com/cekahesida/edit?html,css,output

The HTML code should be something like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="header"></div>
  <div class="content">
    Some content
    <div style="height: 2000px"></div>
    Some other content
  </div>
</body>
</html>

And the CSS code should be like this:

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

.header {
  height: 100px;
  background: orange;
}

.content {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  background: tomato;
  overflow: auto;
}

The point is to stretch the body fullscreen (via width: 100vw; and height: 100vh;). The header is inserted normally, but the content is stretched absolutely throughout the remaining of the screen with the optional scrollbar (via overflow: auto).

You only need to be careful to set the same height of the header and top of the content.

Upvotes: 2

Related Questions