1

我正在尝试创建侧边栏。好吧，设计应该是3个div。页眉（已经完成）、侧边栏和主 div。

侧边栏应位于屏幕左侧，一直延伸到底部（高度：100%）。我遇到的问题是我无法制作 100% 的 Div，因为它的高度仅延伸到我在 div 中的文本行数。

这是我目前拥有的侧边栏的 CSS：

#sidebar {
    float: left;
    margin-top:36px;
    width: 300px;
    height:100%;
    background-color: #111211;
}

这是我目前拥有的正文的 CSS 代码：

body {
    margin:0;
    padding:0px;
    background-color:#87AFC7;
}

这是HTML代码：

<body>
  <div id="sidebar"> left-sidebar </div>
</body>
4

4 回答 4

1

您需要将侧边栏父级的高度设置为100%，然后将其父级设置为。由于侧边栏是元素的直接子body元素，只需将其添加到您的 CSS 中：

html,body { height:100%; }
于 2012-08-09T04:09:16.457 回答
1

你可以尝试类似的东西；

CSS

#container {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#top, #left, #right {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 0px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 0px;
    background: #ff7e00
}

HTML

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

这是一个有效的现场演示。

希望这可以帮助..

于 2012-08-09T05:57:29.210 回答
0

您可以使用像素而不是百分比：

height:1000px;
于 2012-08-09T04:29:35.437 回答
0

请试试这个，让我知道

#sidebar {
    position:fixed;
    right:0px;
    margin-top:36px;
    width: 300px;
    height:100%;
    background-color: #111211;
}

body, html {

hieght:100%

}
于 2012-08-09T06:12:30.237 回答