Html 无绝对位置的可滚动div

有没有办法制作这样的东西：，但没有左右面板的绝对位置？我想让他们滚动，但没有绝对位置

HTML:

---

我想这会对你有帮助

/*样式在这里*/
身体{
边际：0px；
}
#标题{
背景颜色：银色；
高度：30px；
}
#左,，
#对{
溢出y：自动；
}
#左{
背景颜色：黄色；
宽度：50%；
高度：250px；
浮动：左；
}
#对{
背景颜色：橙色；
宽度：50%；
高度：250px；
浮动：对；
}

你好，普朗克！
标题
左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

左

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

对

---

它只会在需要时添加滚动条

也许您可以查看此小提琴：

因此，我删除了绝对位置，并完全基于高度的代码，这确保了溢出发生

html, body {
    margin: 0px;
    overflow:hidden;
    height:100%;
}

#left, #right {
    float:left;
    height: 95%;
    overflow: auto;
    width: 50%;
}

#header {
    background-color: silver;
    height: 30px;
}
#left, #right {
    position: absolute;
    top: 30px;
    bottom: 0px;
    overflow: auto;
    width: 50%;
}
#left {
    background-color: yellow;
    left: 0px;
}
#right {
    background-color: orange;
    right: 0px;
}

div{ overflow-y: auto; }

html, body {
    margin: 0px;
    overflow:hidden;
    height:100%;
}

#left, #right {
    float:left;
    height: 95%;
    overflow: auto;
    width: 50%;
}