我有一个名为 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
也什么都不做。
谢谢。
最佳答案
实现此目的的一种方法是为 #content
设置背景图像,该图像用于 #sidebar
:
#content {
background: url(data:image/png;base64,[BASE64-DATA]) repeat-y; /* background-image for #sidebar */
}
从 #sidebar
中移除 background
、border-right
和 box-shadow
:
#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 { 显示:内联 block }
这样,您就不必关心要放多少内容;)
现场演示:http://jsfiddle.net/QXfH3/5/
如果您不想使用图像,为了获得这种错觉,answer from Alvaro似乎是最好的方法
关于html - 侧边栏未到达内容 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11126488/