Menu
I have two div's. One that's the body of my page and other that's the footer of my page. The footer div should have 100% of width, even when I resize browser window.
My webpage is in this way:
When I resize browser window the scroll appears:
If I scroll the page horizontally, my footer isn't 100% of width anymore:
What should I do to keep my footer div always 100% of width?
<body>
<div id="header"></div>
<div id="footer"></div>
</body>
#header {
height: 500px;
width: 1100px;
margin: 0 auto;
background: grey;
}
#footer {
background: #6B191C;
position: absolute;
left: 0;
height: 100px;
width: 100%;
margin-top: 60px;
}
353
I just find a solution here: http://www.impressivewebs.com/fluid-header-footer-problem/
Setting a min-width to the footer with the same width of the main div (1100px).
I changed the css of my footer to this:
#footer {
background: #6B191C;
height: 100px;
margin-top: 60px;
min-width: 1100px;
}
And added some properties to the body:
body {
width: 100%;
margin: auto;
}
This link shows a webpage with this problem and another one with the solution applied: http://www.impressivewebs.com/demo-files/fluid-header-footer/
135
Use vw instead of %. 1vh equals to 1% of browsers viewport.
#footer {
background: #6B191C;
position: absolute;
left: 0;
height: 100px;
width: 100vw;
margin-top: 60px;
}
There are more relative lengths than just vw. There is:
vh - Relative to 1% of the height of the viewportvw - Relative to 1% of the width of the viewportvmin - Relative to 1% of viewport's smaller dimensionvmax - Relative to 1% of viewport's larger dimensionsource: https://developer.mozilla.org/en-US/docs/Web/CSS/length
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
