Javascript 拉伸div以填充空白

我有3个

div

水平对齐

• div1是我的侧边栏

  display:block;
  float:left;
  width:180px;
  height:100%;
  

• 第2部分是中间部分（子内容）

• 第3部分是正确的部分

---

width:100%

在Div 3上，将其放置在Div 1和Div 2下面。如何使其向上延伸到页面的右侧？

出现此问题的原因是剩余宽度不是100%，而是100%是整个窗口的宽度

所以可以使用css3 calc（）函数

在使用calc（）函数之前，请参见此

或者，如果您想通过自己计算来使用宽度，请以像素为单位定义宽度，将主容器宽度减去（180+200）px

---

否则，您可以定义更适合您的宽度自动。

如果不想使用calc（）函数，请尝试以下操作：

<div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="panel">panel</div>
    <div class="main">main</div>
</div>

.wrapper {
    border: 1px dotted blue;
    height: 400px;
}
.sidebar {
    width: 100px;
    height: 100%;
    background-color: tan;
    float: left;
}
.panel {
    width: 200px;
    height: 100%;
    background-color: pink;    
    float: left;
}
.main {
    width: auto;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

边栏
面板
主要的
.包装纸{
边框：1px点蓝色；
高度：400px；
}
.侧边栏{
宽度：100px；
身高：100%；
背景颜色：棕褐色；
浮动：左；
}
.小组{
宽度：200px；
身高：100%；
背景颜色：粉红色；
浮动：左；
}
梅因先生{
宽度：自动；
身高：100%；
边框：1px纯红；
溢出：自动；
}

请参见演示：

.main上的
溢出：auto
将使div保持为一列，而不环绕浮动的元素，这可能是您所需要的

.div3{
width: calc(100% - 180px - 200px)
}

<div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="panel">panel</div>
    <div class="main">main</div>
</div>

.wrapper {
    border: 1px dotted blue;
    height: 400px;
}
.sidebar {
    width: 100px;
    height: 100%;
    background-color: tan;
    float: left;
}
.panel {
    width: 200px;
    height: 100%;
    background-color: pink;    
    float: left;
}
.main {
    width: auto;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}