Sometimes, we use CSS to create a highly adaptive layout, how to ensure that the footer (footer) in the context of not more than one screen is always at the bottom of the layout is a relatively headache. I have seen some examples of using absolute positioning, but the total feeling is not so perfect, after an afternoon study summed up a negative external patch to achieve this effect of the method, compatible with Ie5.0+,opera 8.5+,firefox 1.5+. Let's look at the following steps:
1, in order for the browser to recognize the height of 100%, we need to first give the HTML and body a height value, while clearing all the elements of margin and padding. Incidentally, after my test, HTML and body of the height:100%; equals the total height of the entire browser window, regardless of whether the content is more than one screen. And their next level child element height:100%; is equal to the height of the first screen. How, is it a little hard to understand?
* {
margin:0;
padding:0;
}
HTML, Body {
height:100%;
}
2, because of the above mentioned problem, so in order to allow the layout of adaptive height, we want to add min-height:100%, although IE does not support this attribute but IE height:100%; Have the same effect:
#wrapper {
min-height:100%;
}
* HTML #wrapper {
height:100%;
}
In this way, a simple minimum height full screen of the adaptive layout is done. For ease of viewing, I added some width and background color decorations, as follows:
* {
margin:0;
padding:0;
}
HTML, Body {
height:100%;
Text-align:center;
font:12px/1.4 Verdana, Sans-serif;
Background: #f00;
}
#wrapper {
width:770px;
min-height:100%;
Background: #ccc;
Margin:auto;
Text-align:left;
}
* HTML #wrapper {
height:100%;
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jzxue.com-Construction Station Science </title>
<style type= "Text/css" >
/*<! [cdata[*/
* {
margin:0;
padding:0;
}
HTML, Body {
height:100%;
Text-align:center;
font:12px/1.4 Verdana, Sans-serif;
Background: #F00;
}
#wrapper {
width:770px;
min-height:100%;
Background: #ccc;
Margin:auto;
Text-align:left;
}
* HTML #wrapper {
height:100%;
}
#header {
Background:green;
height:40px;
}
#sidebar {
Float:left;
width:200px;
Background:gray;
}
#content-box {
Float:right;
width:570px;
background:olive;
}
#footer {
height:50px;
Background:background;
width:770px;
Margin:auto;
}
/*]]>*/
</style>
<body>
<div id= "wrapper" >
<div id= "Header" > here displays the contents of the id "header" </div>
<div id= "Content-box" > here Displays the contents of the id "Content-box" </div>
<div id= "sidebar" > here displays the contents of the id "sidebar" </div>
</div>
<div id= "Footer" > here displays the contents of the id "footer" </div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
