ansaurus

Question

CSS Layout for Header, Footer and Content with Scrollbar

Answer 1

A:

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/

Just Change the

#content {
  background: #fff;
  position: absolute;
  top: 100px;
  left: 150px;
  width: 700px;
  height: 500px;
}

height : auto;

max-height:whatever you want

overflow-x:hidden;

overflow-y:auto;

KhanZeeshan 2010-10-06 11:01:24

although you want to set a height specifically, so it looks the same in all browsers, IE7 does not support max-height as far as I know.

jimplode 2010-10-06 11:13:51

This doesn't work at all for me. The footer should be placed at the bottom of the browser window.

chris 2010-10-06 11:29:27

KhanZeeshan 2010-10-06 11:39:52

http://blog.html.it/layoutgala/ also check this out. it contains alot of layouts

KhanZeeshan 2010-10-06 11:41:21

Still not working with IE8/Chrome. What browser are you using?

chris 2010-10-06 12:04:40

what you are asking is not possible without the use of javascript. You did not state the footer had to be at the bottom of the browser window!! You can place the footer using position:fixed; but to set the height of the content container you will have to do this using javascript. Why on earth do you want the footer to always be at the bottom??

jimplode 2010-10-06 14:41:32

@jimplode: oh so not true! You can definitely get the footer at the bottom of the page without JavaScript. There are a few methods for doing this (*one of which is demonstrated in my answer to this question*). Look up "CSS sticky footer" on the web. In my opinion, using CSS to force the footer to the bottom is way better looking than JavaScript; the JS solution seems laggy. Forcing the footer to the bottom is a preference thing.

JohnB 2010-10-08 15:29:46

I see what they have done in this, still not convinced it would work in earlier versions of ie.

jimplode 2010-10-08 21:11:26

Answer 2

A:

I'm confused as to what you are looking for. You say that you want a scrollbar for the content section, but did you know that browsers automatically provide scrollbars when needed?

The HTML page below renders the layout you are describing (i think), but if you want to force a scrollbar to the .content section for some reason, then just add this extra line to the CSS:

.content { height : 300px; overflow-y:auto; }

See my code run on jsFiddle.net

Btw, I removed what I felt was unnecessary code from your html, such as the width:100; etc.

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"&gt;
  <style type="text/css">
    html, body{ height:100%; }
    #outer{ /* footer stick to bottom */ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -1.5em; /* end footer stick to bottom */ }
    .header { background-color: red; }
    .footer, .push { height: 1.5em; }
    .footer {  position:relative; background-color: blue; text-align:center;}
  </style>
  <script type="text/javascript">
    $(function ()
    {
    $("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
    $("#toggle").click(function () { $("#text").toggle(); });
    });
  </script>
</head>
<body>
  <div id="outer">
    <div class="header">
      header <a id="grow" href="#">grow</a>
    </div>
    <div class="content">
      <h3>Lorem:</h3>
      <p><a id="toggle" href="#">toggle</a></p>
      <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
        neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
        posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
        nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
        interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
        mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
        Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus
        sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim.
      </p>
    </div>
    <div class="push"></div>
  </div>
  <div class="footer">footer</div>
</body>
</html

JohnB 2010-10-06 15:11:49

I don't want to set content to a fixed height - it should grow with the windows size.

chris 2010-10-06 16:09:37

So this answer doesn't help you at all?

JohnB 2010-10-14 19:09:03

Answer 3

A:

sorry, didn't use your code, but here is a basic outline of what i think you want done.

   <!DOCTYPE html>
<head>
    <style type="text/css">
    html {
        min-height: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .wrap {
        width: 900px;
        margin: 0 auto 0;
        padding: 0;
    }
    .head {
        width: 900px;
        background: black;
        color: white;
        min-height: 20px;/* just for example */
        display: block;
        position: fixed;
        z-index: 1000;
        top: 0;
    }
    .content {
        width: 900px;
        background: gray;
        color: black;
        height: 100%;
        display: block;
        overflow-y: auto;
        margin: 20px 0 20px 0; /* top and bottom margins must be the height of your header/footer, respectively */
    }
    .footer {
        width: 900px;
        background: black;
        color: white;
        min-height: 20px;
        display: block;
        position: fixed;
        bottom: 0;
        z-index: 1000;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="head">
            <!-- your header content-->
            test
        </div>
        <div class="content">
            <!-- main content, scrollable -->
            test
        </div>
        <div class="footer">
            <!-- your footer content -->
            test
        </div>
    </div>
</body>
</html>

it doesn't seem to me that you are trying to use a sticky footer, so you could just use position: fixed; bottom: 0 to keep it there.

since you are styling your <div id="outer"> with a height/min-height of 100%, its deriving it's height from the parent elements, so that's why you are getting the scroll bar. html, body {overflow: hidden} takes care of that.

for your content, add overflow-y: auto

the only tricky part is you HAVE to have margin top and bottom declarations so you dont have content being overlapped by your header and footer. maybe some javascript to dynamically pick your header/footer heights and add them to your content margins.

is this getting closer?

davidg 2010-10-18 16:08:43

i suppose you dont need to have your header position:fixed. just an idea.

davidg 2010-10-18 16:12:59

ansaurus

tags:

views:

answers:

CSS Layout for Header, Footer and Content with Scrollbar

related questions