Html 侧边栏未到达内容div的底部

我有一个名为content的div，其中有一个名为sidebar的div。我希望侧边栏延伸到content div的底部，但事实并非如此。以下是相关的标记和CSS：

<div id="content">
    <div id="sidebar">
        <ul>
            <li><a href="/register">Register</a></li>
            <li><a href="/login">Login</a></li>
            <li><a href="/forgotpass">Forgotten password</a></li>
        </ul>
    </div>
    <form action="login" method="post" id="main-form">
        <p class="p-username">
            <label for="username">Username</label>
            <?php echo form_error('username'); ?>
            <input original-title="Alphanumeric characters, underscores and dashes" type="text" name="username" value="<?php echo set_value('username') ?>">
        </p>
        <p class="p-password">
            <label for="password">Password</label>
            <?php if(isset($error)): ?>
                <span class="error"><?php echo $error ?></span>
            <?php else: ?>
                <?php echo form_error('password'); ?>
            <?php endif; ?>
            <input original-title="Please choose a strong password" type="password" name="password">
        </p>
        <p>
            <input type="submit" class="primary-button" value="Log in">
        </p>
    </form>
    <div class="clear"></div>
</div>

和一个JSIDLE链接：

如您所见，侧边栏在最后一个列表项之后停止。我希望它能延伸到内容部分的底部。我原以为增加高度：100%就可以了，但显然不行。高度：继承也不做任何事情

谢谢。

你错过了：

.clear {clear:both}

高度继承自父元素，因此您需要添加：

body, html {height:100% }

你错过了：

.clear {clear:both}

高度继承自父元素，因此您需要添加：

body, html {height:100% }

---

您必须为容器div指定一个高度，在本例中为content。如果不是身高100%没有意义。

---

在本例中，您必须为容器div指定一个高度。如果不是身高100%没有意义。

---

您需要的是固定的流体布局。不幸的是，在纯CSS中，如果不指定绝对高度，事情可能会有点棘手，因此a可能是最好的选择。否则，看看这里

---

你要找的是一个固定的流体布局。不幸的是，在纯CSS中，如果不指定绝对高度，事情可能会有点棘手，因此a可能是最好的选择。否则，看看这里

---

实现此目的的一种方法是为侧边栏的内容设置背景图像：

内容{ 背景：urldata:image/png；base64，[base64-DATA]repeat-y；/*侧边栏的背景图像*/ } 从侧边栏中删除背景、右边框和框阴影：

边栏{ 宽度：250px； /*背景：f5f8fa*/ 浮动：左； 身高：100%； /*右边框：1px实心e0eefb； 盒影：插图-5px 0px 4px-2px e8f1f9*/ 右边距：10px； } 并将右侧列的全部内容包装到一个div中（在本例中为right），然后应用此样式： 右{显示：内联块}

这样，你就不必关心你在里面放了多少内容

现场演示：

---

如果您不想使用图像，要获得这种错觉，最好的方法似乎是

实现这一点的方法是为侧边栏的内容设置背景图像：

内容{ 背景：urldata:image/png；base64，[base64-DATA]repeat-y；/*侧边栏的背景图像*/ } 从侧边栏中删除背景、右边框和框阴影：

边栏{ 宽度：250px； /*背景：f5f8fa*/ 浮动：左； 身高：100%； /*右边框：1px实心e0eefb； 盒影：插图-5px 0px 4px-2px e8f1f9*/ 右边距：10px； } 并将右侧列的全部内容包装到一个div中（在本例中为right），然后应用此样式： 右{显示：内联块}

这样，你就不必关心你在里面放了多少内容

现场演示：

---

如果你不想使用图像，为了得到这种错觉，最好的方法似乎是

。清除是在样式表中，我只是忘了将其添加到帖子中。我试过身高和身高：100%；这没什么区别。问题是，内容根据其中的内容改变高度，我需要侧边栏延伸到内容的高度。clear在样式表中，我只是忘了将其添加到帖子中。我试过身高和身高：100%；这没什么区别。问题是，内容根据其中的内容改变高度，我需要侧边栏延伸到内容的高度。这似乎是不使用复杂的CSS内容的唯一方法。我希望不必使用图像，但哦，好吧。谢谢：这似乎是唯一不使用复杂CSS的方法。我希望不必使用图像，但哦，好吧。谢谢：