我在CSS上遇到了一些问题,基本上我想要一个主容器和一个固定的粘性标头。主容器的宽度为900px,但我希望页眉拉伸整个页面。我已经知道了,但我还希望在标题容器内的容器中有一个单独的容器,该容器长900像素。很难解释,但这是我到目前为止的内容:
的HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
<div id="Centerheader">
This should be centered in the header.
</div>
</div>
<div id="Main">
This is a test.
</div>
</body>
</html>
的CSS
#Main {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: auto;
margin-left: auto;
width: 900px;
height: 1200px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-top: 120px;
}
#Header {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
width: 100%;
position: fixed;
height: 120px;
background-color: #333333;
top: 0px;
}
#Centerheader {
width: 900px;
height: 120px;
position: fixed;
top: 0px;
margin-right:auto;
margin-left: auto;
}
}
希望我已经解释得足够好了。
谢谢,
Skurope
最佳答案
只需从fixed
中删除#Centerheader
位置:
#Centerheader {
width: 900px;
height: 120px;
/*position: fixed; Remove this*/
margin:0 auto;
}
选中此Demo