Question

我有一个名为content的div，其中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>

CSS：

#content {
    width: 960px;
    border: 1px solid #e7e7e7;
    margin-top: 10px;
    border-radius: 5px;
}

#sidebar {
    width: 250px;
    background: #f5f8fa;
    float: left;
    height: 100%;
    border-right: 1px solid #e0eefb;
    box-shadow: inset -5px 0px 4px -2px #e8f1f9;
    margin-right: 10px;
}

#sidebar ul {
    margin:; 0;
    padding: 0;
    list-style-type: none;
}

#sidebar ul li {
    line-height: 40px;
}

#sidebar ul li a {
    display: block;
    width: inherit;
    padding-left: 20px;
    text-decoration: none;
    font-size: 16px;
}

和jsFiddle链接：http://jsfiddle.net/QXfH3/

如您所见，侧栏在最后一个列表项后停止。我希望它延伸到content div的底部。我认为添加height: 100%会这样做，但显然不是。 height: inherit也没有做任何事情。

感谢。

Answer 1

你错过了：

.clear {clear:both}

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

body, html {height:100% }

Answer 2

您必须为容器div指定高度，在本例中为#content。如果没有高度100％没有意义。 http://jsfiddle.net/fS8TB/1/

Answer 3

您正在寻找的是固定流体布局。不幸的是，在没有指定绝对高度的情况下，纯CSS中的事情可能有点棘手，所以<table>可能是你最好的选择。否则，看看这里......

Fiddle demonstrating fixed-fluid layout

Answer 4

实现此目的的一种方法是为#content设置#sidebar的背景图片：

#content {
    background: url(data:image/png;base64,[BASE64-DATA]) repeat-y; /* background-image for #sidebar */
}

从background删除border-right，box-shadow和#sidebar：

#sidebar {
    width: 250px;
    /* background: #f5f8fa; */
    float: left;
    height: 100%;
    /* border-right: 1px solid #e0eefb;
    box-shadow: inset -5px 0px 4px -2px #e8f1f9; */
    margin-right: 10px;
}

并将右列的整个内容包装到div（在此示例中为#right）并应用此样式： #right {display：inline-block}

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

现场演示：http://jsfiddle.net/QXfH3/5/

如果您不想使用图片，为了获得这种幻觉，answer from Alvaro似乎是最好的方式

补充工具栏未达到内容div的底部

4 个答案: