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

3分区。 车身边缘为10px。

底部的图片

我希望div具有相同的宽度，两侧的边距相同，同时覆盖/使用整个浏览器的宽度，无论大小（台式机、平板电脑、手机）

---

以下是我使用喷泉所做的以及我所相信的：

“整个浏览器宽度为100%

如果div的边距为10px，而body的边距为10px，则

该部门的宽度将在30%左右

让我们试试30%

它也适合-空白

让我们试试30.5%

空白处，两边不相等

让我们放32%

等等。“

---

但我经常会在右边或一个div上留下额外的空白，因为它实际上太宽了

有没有更简单的方法？财产

多谢各位

设计：

媒体查询：

---

我认为最好的方法是为每个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%;
}

你好，世界
.货柜已满{
宽度：100%；
}
.货柜三号{
宽度：33.33%；
填充：10px；
}
.内容{
宽度：100%；
}

---

使用填充，而不是边距。请确保使用

框大小：边框框

您的问题源于这样一个事实，即您将相对单位与绝对单位混合在一起-像素是绝对单位，因为

10px

始终是

10px

，但百分比是相对于屏幕宽度的，因此，无论你能让它多么接近屏幕的全宽，只要你改变屏幕的宽度，所有的值都会改变

您在此处（至少）有两个选项：

首先，将所有单位切换为百分比，以便每个测量值都与屏幕宽度相关。换句话说，如果您使用基于百分比的边距，您将确切地知道可以为每件事情分配多少空间

或者，如果您确实需要将边距设置为绝对像素宽度，请使用CSS

calc

：

CSS的这一特性允许您轻松地混合单元类型，并让浏览器计算出它

例如：

宽度：计算（33.333%-20px）

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

如果所有三个
div
s都具有此宽度，则占用的总空间将等于屏幕的100%，所有页边距的空间都将被占用

（如果希望第一个和最后一个div分别在左侧和右侧没有边距，只需将计算更改为匹配！）



额外小费！请记住，代码中的空白将在元素之间添加空格，因此如果您将所有内容的样式设置为完全100%宽度，如果您没有处理此问题，这些额外的空格仍可能导致项目中断。显示：flex已得到广泛支持，因此您可以依赖它而不是浮动。
如果不使用
框大小：边框框
用于所有元素-您至少可以使用
10px
填充来填充有问题的div。
下面是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;
}

请在问题中包含您的代码。或者您可以使用
display:flex
作为参考：非常感谢！非常感谢你！我已经尝试过你写的解决方案，它们非常棒！他们帮助我理解！非常感谢。我保留了像素（绝对）的填充以保持布局，但由于我使用了边框框，所以宽度以pourcentage为单位。当你说，不要混合相对单位和绝对单位，你不是在说填充，对吗？对，我不是指填充；例如，所有三个div的宽度都是
30%
width，第一个div的右边是
2.5%
margin，第二个div的两边是
2.5%
margin，第三个div的左边是
2.5%
。这样你就知道你的宽度和边距的总和永远是容器的
100%
width，而如果边距是以像素为单位的，就没有办法如此自信了。（这就是
calc
方法的用武之地）很好！非常感谢你，布莱克@萨米：没问题！顺便说一下，如果这里的任何一个答案帮助你，请考虑通过点击位于答案左边的复选标记来接受一个，这样它就可以被认为解决了！