CODEWITHSUNDEEP
htmlcss
PaolaJ.
PaolaJ.

Reputation: 11532

Header and footer make fixed

I have three divs: header, content and footer

<div id="topBar" class="rounded" >
  <a id="close" ></a>
</div>

  <div id="contentHolder">

  </div> 
  <div id="bottomBar">
  <div>

css

#topBar{
    height:40px;
    background:linear-gradient(#6FACD5, #497BAE) repeat scroll 0% 0% #5E87B0;
    border:1px solid #fff;
    margin-bottom:15px;
    position:relative;
    width:100%;
    color:#777;
    text-shadow:1px 1px 0 #FFFFFF;
}


#contentHolder{
    height:80%;
    width:100%;
    max-height: 80%;
    margin-bottom:20px;
    float:left;
}


#bottomBar{
    background:linear-gradient(#6FACD5, #497BAE) repeat scroll 0% 0% #5E87B0;
    position:relative;
    padding:10px;
    border:1px solid #fff;
    clear: left;
    width: 100%;
}

How to make with css that header and footer are always visible and only content scrollable ? At the moment everything is scrollable. ( I added position fixed to header and it works, but when I add position fixed and margin-bottom:20px to footer it goes at top of page.)

Upvotes: 0

Views: 109

Answers (4)

Sushant Khurana
Sushant Khurana

Reputation: 91

#header {
position: fixed;
top: 0;
left:0;
}

#footer {
position: fixed;
bottom: 0;
left: 0;
}

Upvotes: 1

Rahul Tripathi
Rahul Tripathi

Reputation: 172378

You may try like this using the position: fixed; top 0 for header and position: fixed; bottom 0 for footer:

JSFIDDLE DEMO

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
}
#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}
footer {
    width: 100%;
    height: 60px;
    background: green;
    position: fixed;
    bottom: 0;
}

Upvotes: 2

Alex Wilson
Alex Wilson

Reputation: 2419

try use sticky footer DEMO

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

Upvotes: 1

mabdrabo
mabdrabo

Reputation: 1060

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

source: http://css-tricks.com/snippets/css/fixed-footer/

Upvotes: 1

Related Questions