Question

我正在尝试创建侧边栏。嗯，设计应该是3 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>

Answer 1

您需要将侧边栏的父级高度设置为100%，然后将其父级设置为body。由于侧边栏是html,body { height:100%; }元素的直接子项，因此只需将其添加到CSS：

{{1}}

Answer 2

您可以尝试类似的事情;

<强> 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>

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

希望这会有所帮助..

Answer 3

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

height:1000px;

Answer 4

请尝试这个并告诉我

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

body, html {

hieght:100%

}

将DIV对接到屏幕的一侧

4 个答案: