Html 浮动百分比宽度布局

我有4个div，希望将它们放置在我的页面中，如下所示：

我想在以后将许多其他svg文件添加到div4中，并且希望div4可以滚动注意：我只希望div4可以滚动，而不是我的整个页面

到目前为止，我的HTML和CSS是这样的：

#侧面{
宽度：100%；
字体大小：12px；
溢出：隐藏；
/*包含浮动元素*/
}
.1分部{
浮动：左；
宽度：75%；
身高：60%；
}
.第2分部{
保证金：0；
填充：2；
浮动：左；
宽度：30%；
身高：35%；
}
.第3分部{
浮动：左；
宽度：30%；
身高：15%；
}
.第4分部{
浮动：左；
宽度：100%；
身高：40%；
}

要使您的div 4可滚动，只需在CSS中定义

溢出：滚动

，这样内容将隐藏在容器内部而不是流出。

要使您的div 4可滚动，只需在CSS中定义

溢出：滚动

，这样，内容将隐藏在容器内而不是流出。

我为此做了一个修改，请查看：

只需将滚动条的overflow属性设置为auto（auto会在需要时显示滚动条），并将hidden设置为其他div以剪辑内容并隐藏滚动条

---

另外，我对代码中的百分比（在JSFIDLE中）进行了一些编辑，因为您的宽度超过了100%，这就是为什么div2和div3没有相互堆叠的原因。

我对此做了一些修改，请查看：

只需将滚动条的overflow属性设置为auto（auto会在需要时显示滚动条），并将hidden设置为其他div以剪辑内容并隐藏滚动条

---

另外，我对代码中的百分比（在JSFIDLE中）进行了一些编辑，因为您的宽度超过了100%，这就是为什么div2和div3没有相互堆叠的原因。

关于这个问题。Bahador，尝试在CSS中为每个div使用“position:absolute；”。当您这样做时，您可以为每个DIV单独指定“top”和“left”坐标。简言之，您可以创建一个类似于表的结构。您可以使用“position:fixed；”和“position:relative；”执行类似的操作，每个操作都有自己的定位特征

---

至于滚动。。。使一个DIV可滚动的最简单的方法是在其中填充更多的内容。同样地，使一个文件不可滚动的最简单方法是在其中填充不超过其所能容纳的内容。

关于这个问题。Bahador，尝试在CSS中为每个div使用“position:absolute；”。当您这样做时，您可以为每个DIV单独指定“top”和“left”坐标。简言之，您可以创建一个类似于表的结构。您可以使用“position:fixed；”和“position:relative；”执行类似的操作，每个操作都有自己的定位特征

---

至于滚动。。。使一个DIV可滚动的最简单的方法是在其中填充更多的内容。同样，使一个文件不可滚动的最简单方法是，在其中填充不超过所能容纳的内容。

只需定义

overflow:scorll

，它将剪辑内容，但添加一个滚动条以查看其余内容

有关示例，请参见此笔：

---

只需定义

溢出：scorl

，它剪辑内容，但添加一个滚动条以查看其余内容

有关示例，请参见此笔：

---

您的示例需要进行一些小调整：

• html、body

  和父div

  #sides

  需要

  height:100%

  ，这样他们的孩子才能拥有百分比高度

• div的宽度和高度加起来需要达到100%。例如，

  .div1

  是75%的宽度，因此位于它旁边的

  .div2

  需要是25%的宽度

• 框大小：边框框

  将边框和填充合并到每个分区的宽度和高度中

• 滚动div被指定为

  overflow-x:scroll

  ，以便其内容在溢出时滚动，并且

  white space:nowrap

  防止内联元素（例如我的示例中的图像）被包装。确保div内的任何元素都不会高于它

例子

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
身高：100%；
}
#侧面{
身高：100%；
宽度：100%；
}
#侧面>分区{
浮动：左；
填充：10px；
/*框大小：边框框防止填充物吹出宽度和高度*/
}
.1分部{
宽度：75%；
身高：60%；
背景：#E91E63；
}
.第2分部{
浮动：左；
宽度：25%；
身高：35%；
背景#9C27B0；
}
.第3分部{
宽度：25%；
身高：25%；
背景：2196F3；
}
.第4分部{
宽度：100%；
身高：40%；
背景#009688；
溢出-x：滚动；
/*overflow-x也可以指定值“auto”，以便仅在需要时滚动*/
空白：nowrap；
}
.div4>*{
垂直对齐：顶部；
最大高度：100%；
裕度：0 10px 0 0；
}

左边
右上方
右下角

您的示例需要一些小的调整：

• html、body

  和父div

  #sides

  需要

  height:100%

  ，这样他们的孩子才能拥有百分比高度

• div的宽度和高度加起来需要达到100%。例如，

  .div1

  是75%的宽度，因此位于它旁边的

  .div2

  需要是25%的宽度

• 框大小：边框框

  将边框和填充合并到每个分区的宽度和高度中

• 滚动div被指定为

  overflow-x:scroll

  ，以便其内容在溢出时滚动，并且

  空白：nowrap

  防止内联元素（例如

  .div4 {
      overflow:auto;
   }
  

  #sides {
  width: 100%;
  font-size: 12px;
  height:100%;
  position:absolute;        
  background:red;
  /* contain floated elements */
  }
  .div1 {      
  width: 60%;
  height: 60%; 
  float:left;
  background:pink;  
  }
  .div2 {
  background:green;  
  float: left;
  width: 40%;
  height:40%;      
  }
  .div3 {  
  height:20%;
  float:left;
  width: 40%;background:blue;    
  }
  .div4 {         
  overflow-x:scroll;
  width: 100%;
  height: 40%;background:yellow;     
  }
  #div4{    
  width:180% !important;    
  height:auto;
  }
  

    <div id="sides">
       <div class="div1">Div 1</div>
       <div class="div2">Div 2</div>
       <div class="div3">Div 3</div>
       <div class="div4"><div id="div4">Div 4 Div 4 Div 4</div></div>
    </div>