[英]CSS 100% height with header and footer
我在實現Css 100%方面遇到困難,因此我的網站可以在每個Web瀏覽器中正常顯示。 我遵循了我在這里找到的教程,但是沒有使它起作用的運氣。 我有一個包含頁腳的示例。 此頁腳也沒有放置。 另外,我試圖使周圍的黑框覆蓋我的頁腳。 我做錯什么了嗎?
有關更多詳細信息,請查看我的直播示例
的CSS
<style>
html,body {
padding: 0px;
margin: 0px;
background: #333333;
background-size: 100%;
line-height: 130%;
height: 100%
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size: 90%;
color: #5e5e5e;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: -1;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/
#container {
z-index: 1;
width: 850px;
position: relative;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#contentArea{
padding:1em 1em 5em;
min-height:700px;
width: 850px;
position:relative;
background: #f2f2f2;
border-right: 15px solid #000000;
border-left: 15px solid #000000;
position: relative;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
#header {
width: 100%;
height: 180px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
#clear {
clear: both;
margin-bottom: 10px;
}
#addSpace{
padding-bottom:7px;
}
.bottomNav {
margin-right:auto;
margin-left:auto;
width:880px;
height: 200px;
background: #7a7a7a;
}
#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;}
</style>
將頁腳設置到位,您只需要重置width: 905px;
在.bottomNav
類中
在CSS中使用(width:calc)屬性
例如。 您需要頁眉100px和頁腳100px,內容高度為100%
的CSS
body, html{height:100%; margin:0px;}
.header{height:100px;}
.footer{height:100px;}
.content{height: 100%;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: calc(100% - 200px);
}
我們將-200 bcoz標頭高度設置為100px +頁腳高度設置為100px,因此100 + 100 = 200
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.