CODEWITHSUNDEEP
cssheadercss-positionfooter
Sebastian Strajan
Sebastian Strajan

Reputation: 27

CSS header, menu, content and footer position

I have the following HTML and CSS:

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

html,
body {
  background-color: yellow;
  height: 100%;
}

#header {
  position: absolute;
  height: 100px;
  width: 100%;
  background: #335599;
  border-bottom-color: #ffffff;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  z-index: 100;
}

#footer {
  height: 60px;
  width: 100%;
  background-color: #dd1155;
  border-top-color: #ffffff;
  border-top-style: solid;
  border-top-width: 1px;
  z-index: 1000;
}

#wrap {
  position: relative;
  height: 100%;
}

#wrap_content {}

.undef {
  width: 100%;
}

.top_h {
  height: 100px;
}

.bottom_h {
  height: 60px;
}

#page_content {
  padding-left: 150px;
  position: relative;
  color: #FFFFFF;
  background-color: #000000;
}

#menu {
  height: 100%;
  position: relative;
  float: left;
  background-color: #1188FF;
  border-right-color: #ffffff;
  border-right-style: solid;
  border-right-width: 1px;
  z-index: 10;
}

#menu ul {
  list-style: none;
  display: block;
  min-height: 200px;
}

#menu ul li {
  width: 150px;
  height: 25px;
  padding-top: 10px;
  padding-bottom: 4px;
  text-align: center;
  background-color: #992277;
  border-bottom-color: #000000;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-family: Cambria;
}

#menu ul li:hover {
  background-color: #167322;
  color: #ffffff;
}
<div id="wrap">

  <div id="header"></div>

  <div class="undef">
    <div class="top_h"></div>

    <div id="menu">
      <ul>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>

      <div class="bottom_h"></div>

    </div>

    <div id="page_content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat
        eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue
        orci quis vestibulum. Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue.
        Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
      </p>


      <div class="bottom_h"></div>
    </div>

  </div>
  <div id="footer"></div>

</div>

I want to create a page only by using css that has the following:

  1. header height = 100px; must be always on the top of the page(this part is working fine)
  2. footer height = 60px; must be always on the bottom of the page (even if the doesn't have enough content. If the page content or the menu have to much content and the browser scroll bar is displayed then the footer still has to be positioned on the bottom).
  3. the menu must be in the left of the page and has a width of 150px with elements defined as in the example(this part is also working fine)
  4. the page content should extend on the remaining space (it is displayed with black. When all the remaining space is black instead of yellow then it should be ok)

Also the page should dynamically change if the browser window size is changed. The solution should be browser compatible but if it works for firefox or/and chrome then all is ok.

I tried to do this using a lot of tricks but none of them worked. Is it possible to do something like this using only css 2.0?

Upvotes: 0

Views: 15583

Answers (2)

peterchon
peterchon

Reputation: 250

how about:

#header, #menu, #content, #footer {
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

#header {
  height:100px;
  z-index:9999;
}

#menu {
  width:150px;
  padding:100px 0 60px; /* account for header, footer */
  z-index:9997;
}

#content {
  padding:100px 0 60px 150px; /* account for header, menu, footer */
  z-index:9996;
}

#footer {
  height:60px;
  top:inherit;
  bottom:0;
  z-index:9998;
}

html:

<body>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>

Upvotes: 1

Fallenreaper
Fallenreaper

Reputation: 10704

Here is a fiddle of my resolution: http://jsfiddle.net/6rVsE/

2

add to #footer: 

position:fixed; bottom: 0px;

3

add to: #menu: 

width: 150px;

add to: #menu ul li:

width: 100%;

4

because you are doing relative: I would resolve this in Javascript. This example is using jQuery.

$("#page_content").css("height", $(window).height() - $("#header").height() - $("#footer").height() +"px");

Upvotes: 1

Related Questions