Question

我想将div（我的侧边栏）拉伸到页面底部。我知道我需要添加“身高：100％;”为了做到这一点。

但是当我添加高度：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..which包含侧面菜单和大文本...侧边菜单和大文本的组合宽度远远大于容器的900px宽度..因为你没有使用{{ 1}}你无法看到效果......为什么不申请overflow:hidden;或类似的东西

更好的CSS ::

overflow:auto; width:100%

根据您的新问题 ::现在您的身高必须超过100％..这就是为什么在100％身高后您的侧边菜单变得不可见

改进CSS ::

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

你的第三个问题:: 奇怪......你现在正在使用#container { height: auto; overflow: hidden; position: absolute; width: 100%; }为你的cantainer ..你的容器包含侧面菜单和大文本...和侧面菜单的宽度为300px，然后你的宽度为1000px的大文本..所以自然地，文本的溢出部分变得不可见;并删除位置：绝对;从容器现在你的css

width:100%

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

Answer 2

确保您的父容器（#container，body，html）的高度为：100％;同样。

就个人而言，我会做这样的事情（如果网站布局的其余部分允许的话）：

不是为#menu创建单独的背景，＃menu-caontainer和body我会在身体上创建这样的背景：http://cl.ly/image/3L060f2w3Z0s 这将在y轴上垂直重复，所以无论身体有多高，背景都会拉伸/重复到底部。

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

2 个答案: