如何让浮动 div 的边与页面齐平？答案

【问题标题】：How to Get Sides of Floating Div Flush with Page?如何让浮动 div 的边与页面齐平？
【发布时间】：2014-12-12 02:37:44
【问题描述】：

所以我有一个需要与页面左右边缘齐平的 div。它还必须响应正在进行的布局（以便页面可以重新调整大小）。据我所知，最有效的方法是使用浮动布局。如何让 div 的边缘与屏幕边缘齐平？这是我当前的 CSS：

#work {
    float: left;
    width: 100%;
    height: 500px;
    background: #fff;
}

我试过left: 0px 和right: 0px，显然不行（可能是因为它是浮动的……）

在没有办法做到这一点的情况下，如何在仍响应页面其余部分的同时使其刷新？我觉得这是新 Web 开发人员的古老问题之一......

【问题讨论】：

你能用你的html和其他css创建一个jsfiddle.net吗
是的。这是基本思想：jsfiddle.net/x6duerbd

标签： html css floating divider

【解决方案1】：

你不应该在这种基本布局中使用浮动。

确保您正在重置默认浏览器添加边距和填充，然后您可以使用 display: inline-block 来做您想做的事情。

* { margin:0; padding:0 }

div {
    display: inline-block;
    width: 100%;
    height: 500px;
    background: dodgerblue;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

这行得通，但是它将页面上所有其他元素的填充和边距重置为 0。请记住，我有上面的内容。一切都在顶部蜷缩起来（如预期的那样）。还有其他方法吗？
每个浏览器的浏览器边距和内边距都不同。您是否在 Firefox 上检查过您的网站？ IE呢。您可能会注意到一些您不希望由它们不同的边距/填充默认值创建的差异。使用星号是一个超级通用的规则，可确保您始终从您期望的边距/填充开始。我给你的建议是在你想要的元素上重新添加这些边距/填充，然后从那里继续。虽然您可以选择性地重置这一区域的边距和填充，但我不建议这样做。

【解决方案2】：

首先，考虑一下您的响应式框架，您只需一行代码就可以做到这一点。所有响应式框架（Bootstrap、Foundation、skeleton 等）都有一个全宽类。

因为我 99.99% 的时间都在使用 Bootstrap，而且我建议你也这样做，所以我会向你展示那个。

<div class="container-fluid thisContainer">

</div>

.thisContainer{
    background:#ccc;
    height:200px;
 }

就是这样！就这么简单！如果你想玩，这里有一个演示

DEMO

【讨论】：

您是在建议您几乎总是在任何项目上使用引导程序？这真的是个好建议吗？不是讽刺，我真的很想知道，对你来说，是什么让你必须一直使用 css 框架？
是的，我可以使用 Bootstrap，但是作为一个新的编码人员，我正在努力学习所有关于 CSS 工作方式的知识，因此我想知道如何自己做。我不想依赖其他任何东西。这真的是唯一的方法吗？我的意思是这不可能是一个不常见的问题......
Bootstrap 是商业上使用最多的前端框架。它非常健壮、可靠，而且它的 javascript 与众不同。更不用说他们制作了数百个 Bootstrap 友好的附加 jquery，您可以添加更多功能。我与非常大的项目和专业环境（即宾夕法尼亚州福利部、退伍军人事务部和宾夕法尼亚州 CareerLink）合作。在超过 10 年的经验中，我处理过许多前端框架，而 Bootstrap 是迄今为止最好的方法去。在我看来。我相信这里的许多开发者都会同意
是的，Bootstrap 很好，但我希望能够手动完成以扩大我对语言的理解。真的那么复杂吗？
如果您想从头开始构建响应式系统，请继续。我赞扬你。但是我认为您会从使用已构建的产品中学到更多。这样你就知道它应该是什么样子了。无论如何，您仍然必须相应地修改响应类以使其适合您的站点。但是，一定要继续！开始吧。你肯定会在这里很多，但你会学到