固定页眉和侧边导航问题答案

【问题标题】：Fixed Header and Side Navigation Issue固定页眉和侧边导航问题
【发布时间】：2015-03-27 20:28:49
【问题描述】：

我正在构建一个页面，其中固定 100% 高度的侧面导航向左浮动，内容包装器向右浮动。 nav 元素的宽度固定为 300px，并且包装器是响应式的，并在 nav 块之后占用所有宽度。我的问题是我想让标题也固定在顶部，但是一旦我将其位置更改为固定，它就会延伸到整个页面而不是包装器宽度。您能否导航一下我可以使用什么来执行此操作。请看下面的代码。谢谢。

HTML

<body>
    <nav>
    </nav>
    <div id="wrapper">
        <header>
        </header>
        <main>  
            <section>
            </section>
            <section>
            </section>
            <section>
            </section>
        </main>
        <footer>
        </footer>
    </div>
</body>

CSS

header{
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #fff;
}
#wrapper{
    padding-left: 300px;
    float: right;
}
nav{
    top: 0;
    width: 300px;
    min-height: 600px;
    height: 100%;
    position: fixed !important;
    float: left;
}

【问题讨论】：

标签： css html

【解决方案1】：

如果我正确理解你的问题，这可能就是你想要得到的。

演示： http://jsfiddle.net/khhtbf60/

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: gold;
}
nav {
    position: fixed;
    top: 30px;
    left: 0;
    width: 300px;
    height: 100%;
    background: pink;
}
#wrapper {
    padding-top: 30px;
    padding-left: 300px;
}

编辑演示 2： http://jsfiddle.net/khhtbf60/2/（这是 OP 要求的正确布局）

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
}
header {
    position: fixed;
    top: 0;
    left: 300px;
    width: 100%;
    height: 30px;
    background: gold;
    text-align: right; /*added*/
    padding-right: 300px; /*added*/
    box-sizing: border-box; /*added*/
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: pink;
}
#wrapper {
    padding-top: 30px;
    padding-left: 300px;
}

【讨论】：

是的，我也尝试过这种方式，但是如果您尝试将 text-align 更改为与标题元素右对齐，您会看到某些部分没有看到..
感谢 sdcr，这正是我想要的 :) 因为您是第一个找到解决方案的人，所以请发布您的答案，我会将其标记为正确的 :) 非常感谢。
@EmilGurbanov LOL，你在我的回答下发表评论！
哈哈哈，对不起，我对解决方案很满意，我没有注意到这一点:))))

【解决方案2】：

将属性 data-role 添加到您的标题 div 标签。

例子：

<div id="header" data-role="header">

并且为了让它知道宽度上的 100% 是什么，将 wrapper 更改为：

#wrapper{
    width:100%; //or desired width
    height:100%; //or desired height
    padding-left: 300px;
    float: right;
}

在您的情况下是 300 像素，但最好使用 %。

【讨论】：

感谢您的回答，但是将 width: 100% 添加到包装器也会将其拉伸到整个页面
如果我将标题位置更改为相对它完全适合包装器，但是一旦我将其更改为固定它就会伸展
您在数据角色中固定头部并使用相对于 CSS 定位它，相对应该工作。如果没有，请获取 jsfiddle 并告诉我您的问题。
这里是 jsfiddle，问题是我需要将标题放在包装容器中，而不是整个页面宽度 jsfiddle.net/zzgL3ks5/1
Bradley Wilson 感谢您的回答和帮助，您的回答也有效，但@sdcr 给出的解决方案对我来说是最好的:) 非常感谢！

【解决方案3】：

给包装器一个宽度。

#wrapper{
    padding-left: 300px;/*change accordingly*/
}

编辑： Fiddle example

【讨论】：

仅适用于空标题，一旦我使用 text-align: right 值添加文本，它就会在某处消失:)