Question

我正在尝试实现这种布局：

enter image description here

到目前为止，这是我的HTML：

<body>
<div id="content">
<div id="header">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
</div>
</body>

和CSS：

#content{
margin:0 auto;
height:1200px;
width:1000px;
border:2px solid black;
}
#header{
margin:0 auto;
width:inherit;
height:200px;
border-bottom:2px black solid;
}
#nav{
margin:0 auto;
width:inherit;
height:50px;
border-bottom:2px solid black;
}
#footer{
width:inherit;
border-top:2px solid black;
margin-top:-1200px;
height:200px;
clear:both;
}

问题在于页脚 - 它的行为与图表不同。

你能告诉我我的代码有什么问题吗？请不要给我一些其他代码，因为我是CSS的新手。

Answer 1

您的页脚向上移动，因为您有页边距：-1200px

如何使用css实现这个特定的布局？

1 个答案: