Css 如何获得一个div来填充屏幕高度的剩余部分

我有一个div，我需要底部div来填充屏幕的其余部分并显示一个滚动条。底部div没有显示滚动条

.page{
位置：固定；
排名：0；
宽度：100%；
身高：100%；
保证金：0；
填充：$菜单高度0；
框大小：边框框；
}
.侧边栏{
宽度：500px；
浮动：左；
身高：100%；
框大小：边框框；
背景：ddd；
右边框：1px纯红；
}
.顶{
高度：200px；
背景：#eee；
}
.底部{
背景：#ccc；
溢出y：自动；
}
.填料含量{
高度：2000px；
}

顶部
底部

如果我正确理解了您的问题，

display:flex

是您的朋友。 添加

显示：flex；弯曲方向：立柱

到你的

.sidebar

和

flex:1到你的
.bottom
，这样就可以了。如果我误解了，请在评论中告诉我，否则我会尽力帮助你

演示：
如果我正确理解了您的问题，
display:flex
是您的朋友。
添加
显示：flex；弯曲方向：立柱
到你的
.sidebar
和
flex:1到你的
.bottom
，这样就可以了。如果我误解了，请在评论中告诉我，否则我会尽力帮助你

演示：
您可以将此代码用于底部div srollbar

.bottom {
  background: #ccc;
  overflow-y: auto;
  height:200px;

}

您可以将此代码用于底部div srollbar

.bottom {
  background: #ccc;
  overflow-y: auto;
  height:200px;

}

我会使用flexbox解决方案，因为它会使它变得更简单，并且不再需要使用浮动（在css3时代，我们不应该滥用浮动）


html，
身体{
身高：100%；
保证金：0；
}
.第页{
身高：100%；
display:flex；/*这一个不需要浮动侧边栏，可以插入一个占据剩余宽度的主区域*/
弯曲方向：立柱；
柔性包装：包装；
}
.侧边栏{
宽度：500px；
身高：100%；
display:flex；/*这是为了让我们可以从底部获得顶部不需要的任何高度*/
弯曲方向：立柱；
背景：ddd；
右边框：1px纯红；
}
.顶{
弹性基准：200px；
最小高度：200px；/*这两个将强制top为200px，否则flex可能会根据可用空间重新计算*/
最大高度：200px；
背景：#eee；
}
.底部{
flex grow:1；/*这将强制底部增长以填充顶部不占用的空间*/
溢出y：自动；
}
/*下面是测试和示例*/
.填料含量{
高度：1000px；
}
梅因先生{
柔性生长：1；
背景：白色；
}

顶部
底部
我会使用flexbox解决方案，因为它将使它变得更简单，并且不再需要使用浮动（在css3时代，我们不应该滥用浮动）


html，
身体{
身高：100%；
保证金：0；
}
.第页{
身高：100%；
display:flex；/*这一个不需要浮动侧边栏，可以插入一个占据剩余宽度的主区域*/
弯曲方向：立柱；
柔性包装：包装；
}
.侧边栏{
宽度：500px；
身高：100%；
display:flex；/*这是为了让我们可以从底部获得顶部不需要的任何高度*/
弯曲方向：立柱；
背景：ddd；
右边框：1px纯红；
}
.顶{
弹性基准：200px；
最小高度：200px；/*这两个将强制top为200px，否则flex可能会根据可用空间重新计算*/
最大高度：200px；
背景：#eee；
}
.底部{
flex grow:1；/*这将强制底部增长以填充顶部不占用的空间*/
溢出y：自动；
}
/*下面是测试和示例*/
.填料含量{
高度：1000px；
}
梅因先生{
柔性生长：1；
背景：白色；
}

顶部
底部
用这个替换你的css


。侧栏{
宽度：500px；
浮动：左；
身高：100%；
框大小：边框框；
背景：ddd；
右边框：1px纯红；
}
.顶{
高度：200px；
背景：#eee；
}
.底部{
背景：#ccc；
溢出y：滚动；
高度：200px
}
.填料含量{
高度：2000px；
}

顶部
底部
用这个替换你的css


。侧栏{
宽度：500px；
浮动：左；
身高：100%；
框大小：边框框；
背景：ddd；
右边框：1px纯红；
}
.顶{
高度：200px；
背景：#eee；
}
.底部{
背景：#ccc；
溢出y：滚动；
高度：200px
}
.填料含量{
高度：2000px；
}

顶部
底部
.bottom{background:#ccc；overflow-y:scroll；}.bottom{background:#ccc；overflow-y:scroll；}