我有如下代码:
<html>
<head>
<style type="text/css">
#container {
}
#content {
}
a {
color:#0083cc;
}
body {
margin:0px; padding:0px;
}
#header {
height:20px;
background-color:#fb0000;
}
#section1 {
margin: 0 auto;
width: 50%;
border-style: none none solid solid;
border-width: 5px;
border-color: red;
margin-top: 100px;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div style="float: left;">
Test
</div>
<div id="section1">
<div style="text-align:center;">
<h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
</div>
</div>
</div>
</div>
</body>
</html>
我想知道是否可以让#section1 的边框一直延伸到#header 的底部？同样，是否可以让包含“test”的 div float ，以便它立即出现在 #content1 的边框左侧？
完全重构页面我没问题，所以开始吧。
提前致谢!
编辑: 实际上，我想要完成的很像 facebook 当前的布局。只是更简单。因此，这可以用作查看最终目标的引用
最佳答案
为什么不在#section1 样式中设置padding-top: 100px; 而不是margin-top: 100px;？如果你想让测试内容也显示得更低，你可以使用另一个规则来实现这一点，例如#content div:first-child { margin-top: 100px; 。
关于html - CSS 将 div 高度扩展到页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8374759/