Html css侧边栏的边距定位不断下沉

我有这个html页面：

<div id="ParentHasAbsoluteHeight" style="float: left; width: 600px; height: 537px; background-color:red;">
<div id="leftside" style="float: left; overflow:scroll; height: 100%; width: 200px; background-color: blue"> 
    <div id="sidebar" style=" background-color: green; margin-top:20px; height: 100%; overflow-y: scroll;">
        side
    </div> 
</div>
<div id="rightside" style="background-color: yellow; margin-left:201px; overflow:scroll; height:100%">
</div>
</div>

一边

基本上我希望div#侧边栏有 1.全高全宽 2.利润上限：20px 3.未在其父级内部下沉（完整的滚动条仍应显示）

我设法用表（或display:table）实现了这一点，但我想知道是否有一种方法可以在没有表的情况下实现这一点

---

谢谢

尝试添加位置：相对；到#左侧。

尝试添加位置：相对；到#左侧。

元素的高度将始终根据内容而变化。据我所知，拥有这样一个侧边栏的唯一方法是a.）像你所说的那样使用表格（但我不建议），或者使用背景图像。 制作一个1px高的图像，即父div的宽度和右div的背景色。然后制作一个边栏宽度和背景色的框，并将其放置在图像的左侧。（或者，如果希望边距显示颜色，或有3列等，则可以相应地调整图像和颜色。）将此图像用作父div的垂直重复背景图像

#ParentHasAbsoluteHeight {
  width: 600px;
  height: 537px;
  background: url(full-height-sidebar.jpg) top center repeat-y;
}

---

元素的高度将始终根据内容而变化。据我所知，拥有这样一个侧边栏的唯一方法是a.）像你所说的那样使用表格（但我不建议），或者使用背景图像。 制作一个1px高的图像，即父div的宽度和右div的背景色。然后制作一个边栏宽度和背景色的框，并将其放置在图像的左侧。（或者，如果希望边距显示颜色，或有3列等，则可以相应地调整图像和颜色。）将此图像用作父div的垂直重复背景图像

#ParentHasAbsoluteHeight {
  width: 600px;
  height: 537px;
  background: url(full-height-sidebar.jpg) top center repeat-y;
}

---

不知道你说的不下沉到底是什么意思。你的意思是你不希望#leftside的“蓝色”背景显示出来，但你希望#侧边栏中的文本从顶部开始20像素？可能是这样吧？不知道你说的不下沉到底是什么意思。你的意思是你不希望#leftside的“蓝色”背景显示出来，但你希望#侧边栏中的文本从顶部开始20像素？也许是这样的？