Question

我正在构建一个固定的100％高度侧导航向左浮动的页面，内容包装器向右浮动。 nav元素的固定宽度为300px，包装器具有响应性，并在导航块之后占据所有宽度。我的问题是我想要将标题固定在顶部，但是一旦我将其位置更改为固定，它会延伸到整个页面而不是包装宽度。你可以请导航我可以用来做这件事。请参阅下面的代码。谢谢。

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

Answer 1

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

DEMO： 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;
}

Answer 2

将属性data-role添加到标题div标记中。

示例：

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

为了让它知道100％的宽度，请将包装器更改为：

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

在你的情况下，这将是300px，尽管它更倾向于使用％。

Answer 3

给包装器一个宽度。

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

修改 Fiddle example

修复了标题和侧面导航问题

3 个答案: