CSS layouting for web page?

Question

I am relatively new to CSS. I am trying to create a normal page layout using HTML & CSS, but I am facing an issue. Here is my HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery</title>
    <link rel="stylesheet" type="text/css" href="../css/StyleSheet1.css">
    <script type="text/javascript" src="../javascript/jQuery.js""></script>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

Here is my CSS script

html,body
{
    padding: 0px;
    margin: 0px;
    color: #555;
    font-size: 20px;
    font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
    height: 100%;
}

.container
{
    height: 100%;
    background-color: Green;
    position: relative;
}

.header 
{
    height: 300px;
    width: 100%;
    background-color: Red;
}

.content
{
    width: 100%;
    background-color: Black;
}

.footer
{   
    height: 500px;
    width: 100%;
    background-color: Violet;
    position: absolute;
    bottom: 0px;
}

I am trying to create a header, footer and a content div. But my content div should automatically change it's height. If there is nothing inside content div then my page should at least have content height equal to (page height - (header height + footer height)).

@Vector I tried doing that but it puts a scrollbar and content goes beyond the footer div. — Apoorva sahay, Jul 16 '13 at 17:14

Hugo Migneron · Answer 1 · 2013-07-16T17:13:31.877

You can have a look at Ryan Fait's "sticky footer" here : http://ryanfait.com/sticky-footer/

It does exactly what you are describing (i.e. footer always at least at the bottom of the page, even when the content div is not long enough).

It does require you to make a small change in your markup though. You would end up with

<body>
    <div class="container">
        <div class="header"></div>
        <!-- this is where you put your content -->
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

instead of what you already have. The "push" div is the empty div that fills up the space when the content isn't long enough to fill your page.

EDIT : I created a fiddle with the solution I had in mind. As I said I changed your markup a little bit but hopefully it's not a problem for you.

I also make the header and footer a bit smaller, just to make it easier to play with on jsfiddle.

score 1 · Accepted Answer · answered Jul 16 '13 at 17:49

1

How about changing position to relative? I fiddled it a little:

.footer
{   
    height: 500px;
    width: 100%;
    background-color: green;
    position: relative;
    bottom: 0px;
}

JsFiddle example. See it and tell me is this what you want.

answered Jul 16 '13 at 17:49

Hristo Valkanov

1,689
22
33

score 0 · Answer 3 · answered Jul 16 '13 at 17:40

0

You are using height: 100%; you can't set height using % try using: min-height:450px; what this will do is set a minimum height and increase when content increases

answered Jul 16 '13 at 17:40

Dawood Awan

7,051
10
56
119

score 0 · Answer 4 · answered Jul 16 '13 at 17:45

You can achieve this with the following CSS:

html,body {
  padding: 0px;
  margin: 0px;
  color: #555;
  font-size: 20px;
  font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans    unicode",tahoma,sans-serif;
  height: 100%;
}

.container {
  height: 100%;   
  background-color: Green;
  position: relative;
}

.header {
  position: relative;
  height: 150px;
  width: 100%;
  background-color: Red;
  z-index: 1; /* higher than z-index of content */
}

.content {
  width: 100%;
  position: relative;
  top: -150px; /* - height of header */
  padding-top: 150px; /* + height of header */
  margin-bottom: -350px; /* - (height of header + height of footer) */
  padding-bottom: 200px; /* height of footer */
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  z-index:0; /* lower than z-index of header */
  background-color: Black;
}

.footer {   
  height: 200px;
  width: 100%;
  background-color: Violet;
  position: relative;
  bottom: 0px;
}

See fiddle with long content here: http://jsfiddle.net/EeCk9/

And without content here: http://jsfiddle.net/EeCk9/1/

CSS layouting for web page?

4 Answers4