css 100％宽度在缩放时不起作用

Question

我这里有一些代码

.container{
	height: 200px;
	width: 100%;
	background-color: black;
}

.container_1{
    margin-bottom: 50px;
    height: 200px;
	width: 20000px;
	background-color: black;
}

<div class="container_1">

</div>

<div class="container">
  
</div>

如果向右滚动，则.container停止。但是我给了他100％的奖金，为什么它不起作用？

Answer 1

这是它的父母的100％，这是身体。正文没有明确的宽度，因此它与窗口的客户端大小一样宽。另一个div被迫更宽（20000px），因此它延伸到身体的边界之外。

在下面的片段中，我为身体添加了一个边框，这样你就可以看到第二个div如何贴合到那个边界。

.container {
  height: 200px;
  width: 100%;
  background-color: black;
  opacity: 0.5;
}
.container_1 {
  opacity: 0.5;
  margin-bottom: 50px;
  height: 200px;
  width: 20000px;
  background-color: black;
}
body {
  border: 3px solid red;
}

<div class="container_1">

</div>

<div class="container">

</div>

Answer 2

因为其100％的视口

试试这个，

.main_container{
    float:left;
}

.container{
    height: 200px;
    width: 100%;
    background-color: black;
}

.container_1{
    margin-bottom: 50px;
    height: 200px;
    width: 20000px;
    background-color: black;
}



<div class="main_container">

<div class="container_1">

</div>

<div class="container">

</div>

</div>