Html 如何在部分流动的页面中获得固定的页眉？

我有一个带有包装器的HTML页面，该包装器将宽度限制在最小宽度和最大宽度之间。我想有一个固定的标题（不滚动），重新大小到包装的可用宽度

请参见此处的JSFIDLE：

我已经将宽度设置为100%，但这需要整个文档的100%我无法使用CSS3

代码： HTML: 试试这个代码

#MMenu {
    background-color: #cccccc;
    background-repeat: no-repeat;
    height: 30px;
    position: fixed;
    text-align: center;
    width: inherit; /*add this*/
    z-index: 5;
}

#Main {
    overflow: auto;
    padding-bottom: 40px;
    max-width: 500px;
}

---

给它相同的值

#Mmenu{
  max-width: 520px /* you have 500px max width and 10px padding left and right */
  margin-left:-10px /* to center those 20px */
}

---

首先，您需要添加一层额外的HTML，我称之为

.header

HTML:

---

编辑： 除添加水平滚动条外，此操作有效。如果将包装切换到

位置：绝对

，则移除

宽度

，使用

最大宽度

s

边距：0自动居中，您可以删除这些

位置：固定
从文档流中取出。因此，这是唯一的解决方案：
主菜单上的
宽度
，以及
主菜单上的
宽度：继承
。这不起作用-您添加了
width:500px到主div，所以它似乎也可以工作。对不起，我忘了写你需要设置父级的宽度，然后它就可以工作了。那不是要将标题宽度固定到800px吗？标题必须调整为包装的宽度。抱歉，请更改最大宽度的宽度使用最大宽度：500px；在缅因州，它不起作用。包装最小宽度设置为100px。因此，主菜单栏必须始终位于两条黑线之间的中心。这里唯一的代码问题是，由于将宽度设置为
100%
并带有填充，因此存在水平滚动条。此处已修复：。然而，这是一个链接唯一的答案。代码需要在答案中，以防JSFIDLE关闭。
#MMenu {
    background-color: #cccccc;
    background-repeat: no-repeat;
    height: 30px;
    position: fixed;
    text-align: center;
    width: inherit; /*add this*/
    z-index: 5;
}

#Main {
    overflow: auto;
    padding-bottom: 40px;
    max-width: 500px;
}

#Mmenu{
  max-width: 520px /* you have 500px max width and 10px padding left and right */
  margin-left:-10px /* to center those 20px */
}

<div id="Wrapper">
    <div id="Main">
        <div id="MMenu">
           <div class="header">Main Menu Bar</div>
        </div>
    </div>
    Content...
</div>

#wrapper {
    width:100%;
}

.header {
    min-width: 100px;
    height: 30px;
    max-width: 520px;
    margin: 0 auto;
    background-color: #cccccc;
    left: 0;
}