頁眉和頁腳使固定

我有三個div的：標題，內容和頁腳頁眉和頁腳使固定

<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%; 
}

如何使CSS是頁眉和頁腳總是可見的，只有內容滾動？目前一切都是可滾動的。（我加了固定頭的位置和它的作品，但是當我添加位置固定，下邊距：20像素到頁腳它會在頁面的頂部）

來源

2014-09-11 PaolaJ.

我們需要看到的CSS，但我認爲你沒有用於頁腳的正確位置值。 – 2014-09-11 10:31:21

您可以嘗試像這樣使用position: fixed; top 0的頭和position: fixed; bottom 0爲頁腳：

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; 
}

來源

2014-09-11 10:33:53

#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'); 
}

來源：http://css-tricks.com/snippets/css/fixed-footer/

來源

2014-09-11 10:32:49 mabdrabo

嘗試使用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; 
}

來源

2014-09-11 10:32:57

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

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

來源

2014-09-11 10:39:58

頁眉和頁腳使固定

回答

相關問題