Question

我有这个问题：Problem

顶部栏总是填充浏览器的宽度（它是bootstrap）。然而，底部没有。如果设置为100vw，它会给它一个9600px的长度，我最终会在左边增加一个白色条，随着查看器宽度的增加而增加。与顶部栏相同的CSS使其始终保持在视图中，无论您在页面的哪个位置。

我的身体固定在1440像素宽。

我希望底栏与顶栏一样，但只有在底部滚动时才会在视图中。

底部条形码：

<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>

这个页脚是我使用的免费样本，因为我的预览表在浏览器中查看时总会崩溃。

是的。我是NOOB！的xD

.content {
background-color: #FAEBD7;}

Answer 1

尝试将页脚放在任何其他div之外...

<body>
  <nav>menu...</nav>
  <div>some content...<div>
  <footer>footer content..</footer>
</body>

我猜“容器”类给div一些边距或填充（这就是为什么页脚没有100％的宽度），将页脚放在外面或从div中删除容器类...

使页脚div填充100％的浏览器宽度

1 个答案: