2

我想让一个 div （我的侧边栏）伸展到页面底部。我知道我需要添加“身高：100%；” 为了做到这一点。

但是当我添加 height: 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

我现在要离开家了，今晚晚些时候我可以回复。再次感谢您的帮助！

4

2 回答 2

5 
#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..so自然地，文本的溢出部分变得不可见；并删除位置：绝对；从容器现在你的CSS

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

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

于 2013-08-16T13:06:55.943 回答
0

确保你的父容器（#container、body、html）是 height:100%; 也是。

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

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

于 2013-08-16T13:08:24.733 回答