Question

我正在尝试创建我的第一个网页。但我有一个问题，我搜索了很多，但我仍然无法解决它。所以，问题是，我的div（它类似于页面左侧的背景，它没有内容，只有彩色背景）不会延伸到页面的底部，它只是延伸到屏幕的底部，所以当我向下滚动时，div从那里丢失。它看起来像这样（http://postimg.org/image/aiiabtue1/）

HTML：

<body>   
    <div class="left_strip"></div>
</body>

CSS：

.left_strip {
    position: absolute;
    left: 50%;
    width: 203px;
    height: 100%;
    top: 158px;
    background: rgb(251, 236, 236);
    margin-left: -500px;
}

Answer 1

在正文标记上使用position: relative，在bottom: 0上使用height: 100%代替.left_strip。

在body标记上只有position: relative，元素的高度为100％，但由于距离顶部158px的距离，底部将低于内容158px。

bottom: 0会将元素的底部固定在最近的“定位”（相对的，绝对的，固定的）父元素的底部。

body {
    position: relative;
}
.left_strip {
    position:absolute;
    width:203px;
    top: 158px;
    bottom: 0;
    background-color: blue;
}
.content {
    height: 2000px;
    background-color: red;
    margin-left: 250px;
}

<div class="content"></div>
<div class="left_strip">Test content</div>

Answer 2

而不是使用％尝试使用正文标记的确切像素值使用高于100的％值也可能有所帮助，这似乎也适用于测试。

将div大小拉伸到页面底部

2 个答案: