css - 如果父 div 较长，则使 div 拉伸(stretch)到其内容的长度并超出其长度？

Question

我想让一个 div(我的侧边栏)拉伸(stretch)到页面底部。我知道我需要添加“height: 100%;”为了做到这一点。

但是当我添加 height: 100%; 时，内容比侧边栏少的页面会削减侧边栏的高度，然后您就看不到侧边栏内容了。

This is the index page 。一切看起来都完全是我想要的样子。

This is a sample page 。请注意，侧边栏已被剪切。

CSS:

#menu-container {
    background-image: url('floral.png');
    width: 300px;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow: hidden; 
    position: absolute;
}

#menu {
    background-image: url('menubg.png');
    width: 220px;
    margin: 0;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 20px;
    color: #e8e8e8;
    height: 100%; 
}

#content {
    padding: 0px 0px 30px 325px;
    width: 1000px;
    display: inline-block;
    vertical-align: top;
}

提前致谢!

* @Ritabrata Gautam *

更改后的 CSS 解决了我的第二个问题，但现在我又回到了较短页面上的切断侧边栏:请参见此处:http://www.tarawilder.com/staging/?page_id=19

我现在要离开家，今晚晚些时候我才能回复。再次感谢您的帮助!

Answer 1

#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}

试试这个..它会给你你想要的结果..尽管你的html标记中有很多其他错误

其他一些需要注意的地方...

您的容器的宽度是 900px..其中包含侧面菜单和大文本...侧面菜单和大文本的组合宽度远远大于容器的 900px 宽度..因为您没有使用 overflow:hidden; 你看不到效果...为什么不应用 overflow:auto; width:100% 或类似的东西

更好的 CSS::

#container {
 height: 100%;
 width: 100%;
 overflow: auto;
 position: absolute;
}

根据你的新问题::现在你的高度必须超过 100% ..这就是为什么在 100% 高度之后你的侧面菜单变得不可见

更改了 CSS::

#container {
 height: auto;
 overflow: hidden;
 position: absolute;
 width: 100%;
}

你的第三个问题:: 奇怪...您现在为容器使用 width:100%...并且您的容器包含侧面菜单和大文本...侧面菜单的宽度为 300px，然后您的宽度为 1000px对于大文本..所以文本的溢出部分自然会变得不可见；并删除position:absolute；从容器中 现在你的CSS

 #container {
  height: auto;
  overflow: hidden;
  width: 100%;
 }
 #content {
  padding: 0px 0px 30px 325px;
 vertical-align: top;
 }

注意::不要删除问题中已编辑的部分..您已经删除了之前对问题所做的第二次编辑...这会给 future 的用户将答案与问题联系起来带来困难