Question

我遇到了一些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

Answer 1

只需从fixed移除#Centerheader位置：

#Centerheader {
 width: 900px;
 height: 120px;
 /*position: fixed; Remove this*/
 margin:0 auto;
}

选中 Demo

CSS - 固定粘性标题中的集中容器

1 个答案: