Only 100% width Footer in CSS?
Question
I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
5 answers
solution1
2 2013-08-14 09:52:02
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
solution2
1 ACCPTED 2013-08-14 10:06:13
You just need to take your pageFooter outside of the wrapper.
Here's a working example: http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame: http://jsfiddle.net/jwgfH/3/show
solution3
0 2013-08-14 09:48:58
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
solution4
0 2013-08-14 09:51:29
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px . The rest can be divided by using width:50%; , width:25%; , which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter , you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
solution5
0 2013-08-14 09:54:54
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.