Make a footer div fill 100% width of browser
Question
I have this problem: Problem
the top bar always fills the width of browser (it is bootstrap). The bottom however does not. If set to 100vw it gives it a 9600px length and I end up with a white bar on the left that increases as the viewer width increases. Giving it the same CSS as the top bar makes it always stay on view, no matter where you are on the page.
My body is fixed at 1440px width.
I want the bottom bar to be like the top bar, but be in view only when you scroll at the bottom.
Bottom bar code:
<div class="content">
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help desk</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-sm-3 info">
<h5>Information</h5>
<p> Lorem ipsum dolor amet, consectetur adipiscing elit. Etiam consectetur aliquet aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
</div>
</div>
</div>
<div class="second-bar">
<div class="container">
<h2 class="logo"><a href="#"> LOGO </a></h2>
<div class="social-icons">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
</footer>
This footer is a free sample that I use because the table on my previews one would always collapse when viewed in browser.
And yes. I AM NOOB! xD
.content {
background-color: #FAEBD7;}
1 answers
solution1
0 2017-09-25 20:00:08
try to get footer outside of any other div...
<body>
<nav>menu...</nav>
<div>some content...<div>
<footer>footer content..</footer>
</body>
i guess "container" class give some margin or padding on div (that's why footer doesn't have width of 100%), put footer outside or remove container class from div...
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.