如果父div更长,那么div会延伸到内容的长度吗？

Question

我想将div(我的侧边栏)拉伸到页面底部.我知道我需要添加"身高:100%;" 为了做到这一点.

但是当我添加高度:100%;时,内容比侧边栏少的页面会削减侧边栏的高度,然后您无法看到侧边栏内容.

这是索引页面.一切都看起来就像我想要的那样.

这是一个示例页面.请注意侧边栏已被剪切.

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..which包含侧面菜单和大文本...侧面菜单和大文本的组合宽度远远大于容器的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%你的cantainer ..你的容器包含侧面菜单和大文本...和侧面菜单的宽度为300px然后你的宽度为1000px的大文本..所以自然地,文本的溢出部分变得不可见; 并删除位置:绝对; 从容器现在你的CSS

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

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