使用完整浏览器可用宽度的简单方法（CSS 响应式设计）

Question

3 div。正文边距为 10px.

图片在最下面

我希望 div 具有相同的宽度，两侧的边距相同，同时 covering/using 整个浏览器的宽度，无论大小（台式机、平板电脑、移动设备）

以下是我使用 pourcentage 所做的以及我相信的事情：

" 全浏览器宽度为 100%

如果div的边距是10px，body的边距是10px那么

div 的宽度约为 30%。

让我们试试 30%。

它也适合 - 空白 space。

让我们试试 30.5%。

空白space，两边不相等

让我们输入 32%。

等"

但我经常在右侧得到额外的空白 space 或一个 div 向下，因为它实际上太宽了。

有更简单的方法吗？特性？

谢谢。

设计：

媒体查询：

Answer 1

我认为解决这个问题的最佳方法是为每个 div 设置容器元素，因此结构如下：

<div class="container-full">
   <div class="container-third">
      <div class="content">
        Hello world
      </div>
   </div>
</div>

.container-full{
   width: 100%;
}
.container-third{
   width: 33.33%;
   padding: 10px;
}
.content{
   width: 100%;
}

使用填充，而不是边距。确保使用 box-sizing: border-box

Answer 2

您的问题源于您混合了相对单位和绝对单位 - 像素是绝对单位，因为 10px 始终是 10px，但百分比是相对于屏幕宽度的，因此，无论您多么接近屏幕的整个宽度，只要您更改屏幕的宽度，所有值都会发生变化。

你有（至少）两个选择：

首先，将所有单位切换为百分比，以便每个测量值都是相对于屏幕宽度的。换句话说，如果你使用基于百分比的利润率，你就会确切地知道你可以为每件事分配多少space。

或者，如果您确实需要边距是绝对像素宽度，请使用 CSS calc:

CSS 的这一特性让您可以轻松混合单位类型，并让浏览器进行数学计算。

例如：

width: calc(33.333% - 20px);

将使 div 的样式占据屏幕宽度的三分之一，减去左侧 10px 边距和右侧 10px 边距的宽度。

如果所有三个 div 都具有此宽度，则占用的总 space 将等于屏幕的 100%，并且 space 占所有边距.

（如果你想让第一个和最后一个div分别在左边和右边没有边距，只需更改计算以匹配！）

More Information About 'Calc'

额外小费！请记住，代码中的 white-space 会在您的元素之间添加 spaces，因此如果您将所有内容设置为完全填充 100% 宽度，这些额外的 spaces 可能仍会导致您的项目如果你没有处理这个就中断

Answer 3

display:flex 已经得到广泛支持，因此您可以依赖它而不是浮点数。如果您不对所有元素使用 box-sizing:border-box; - 您至少可以对有问题的 div 使用 10px 填充。这是 sass:

.container {
   display:flex;
   & > div{
      flex:0 0 33.33%;
      padding: 10px;
      box-sizing: border-box;
   }
}

或者您可以在 div 之间使用百分比边距。

.container div{
   width:30%;
   float:left;
   margin-right:5%;
}
.container div:last-child{
   margin-right:0;
}

使用完整浏览器可用宽度的简单方法（CSS 响应式设计）

Simple way of using the full browser available width (CSS Responsive Design)

html

css

media

responsive-design