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

Question

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

请在此处查看JSFiddle：JSFiddle

我已将宽度设置为100％，但占用整个文档的100％。 我无法使用CSS3 。

代码：

HTML：

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

CSS：

#Wrapper {   
    position:relative;
    min-height: 100%;
    min-width:100px;
    max-width:500px;
    background-color: White;
    padding: 0 10px 0 10px; 
    margin-left:auto;
    margin-right:auto;
    text-align: left;
    border-left:1px solid gray;
    border-right:1px solid gray;
}

#MMenu {
    background-color:#cccccc;
    background-repeat: no-repeat;
    height: 30px;
    width:100%;
    position: fixed;
    z-index: 5;
    text-align:center;
}

Answer 1

试试这段代码

#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;
}

Answer 2

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

HTML：

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

其次，您需要进行一些CSS更改：

CSS：

#wrapper {
    width:100%;
}

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

Working JSFiddle

---

编辑：

除了添加水平滚动条之外，这是有效的。如果您将包装器切换到position:absolute，请移除width，使用max-width s margin: 0 auto;居中，您可以将其删除。

Updated JSFiddle

Answer 3

给它相同的值

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