使页脚 div 填充浏览器的 100% 宽度答案

【问题标题】：Make a footer div fill 100% width of browser使页脚 div 填充浏览器的 100% 宽度
【发布时间】：2017-09-25 19:49:28
【问题描述】：

我有这个问题：Problem

顶部栏总是填充浏览器的宽度（它是引导程序）。然而底部没有。如果设置为 100vw，它的长度为 9600 像素，我最终会在左侧看到一个白条，随着查看器宽度的增加而增加。为其提供与顶部栏相同的 CSS 使其始终保持可见，无论您在页面上的哪个位置。

我的身体固定在 1440px 宽度。

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

底部条码：

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

此页脚是我使用的免费示例，因为我的预览表格在浏览器中查看时总是会折叠。

是的。我是菜鸟！ xD

.content {
background-color: #FAEBD7;}

【问题讨论】：

您是否尝试过将页脚 HTML 移出具有固定宽度的包装器？
这里看不出有什么问题。要么发布整个问题，要么至少发布在一个 HTML sn-p 中无法按预期工作的两个部分。更好的是做一个jsfiddle。 bootply.com/TqJP4aYqLQ#
从<div class="second-bar">中删除<div class="container">
我从正文中删除了固定宽度（Noobity Level：Over the Scale），而是创建了一个 Wrapper，将页脚排除在外。稍微摆弄一下 CSS 和页脚就非常合适！我还靠运气、反复试验使我的桌子不变形。通过在这个网站上进行一些搜索，我解决了一些其他问题 :)

标签： html css footer viewport-units

【解决方案1】：

尝试在任何其他 div 之外获取页脚...

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

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

【讨论】：