CSS容器中侧边栏的高度

我有一个非常基本的模板，我一直在努力开发一个基本的站点，包括页眉，页脚和右侧栏。CSS容器中侧边栏的高度

我挣扎设置右手栏到页面的100％，确保每一位家长和右侧栏格本身被设置为100％后：

任何人都可以提出建议，其中我错了？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
main, 
 
nav, 
 
section, 
 
summary { 
 
    display: block; 
 
} 
 
body { 
 
    font: 16px/26px Helvetica, Helvetica Neue, Arial; 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
/* Header */ 
 
.header { 
 
    height: 50px; 
 
    background: #FFE680; 
 
} 
 

 
/* Middle */ 
 
.middle { 
 
    width: 100%; 
 
    padding: 0 0 50px; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.middle:after { 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.content { 
 
    height: 100%; 
 
} 
 

 
/* Right Sidebar */ 
 
.right-sidebar { 
 
    float: right; 
 
    width: 250px; 
 
    margin-left: -250px; 
 
    position: relative; 
 
    background: #FFACAA; 
 
    height: 100%; 
 
} 
 

 
/* Footer */ 
 
.footer { 
 
    margin: -50px auto 0; 
 
    height: 50px; 
 
    background: #BFF08E; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <header class="header"> 
 
    <strong>Header:</strong>Header 
 
    </header> 
 
    <div class="middle"> 
 
    <div class="container"> 
 
     <main class="content"> 
 
     <strong>Content:</strong>Content 
 
     </main> 
 
    </div> 
 
    <aside class="right-sidebar"> 
 
     <strong>Right Sidebar:</strong>Right sidebar 
 
    </aside> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <strong>Footer:</strong>Footer 
 
</footer>

来源

2016-08-28 Laice

因为<div class="middle">元素不扩展。您需要另外设置height，使用视口单位来获取完整的视口高度，然后减去页眉和页脚。

.middle { 
    ... 
    height: calc(100vh - 100px); 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
main, 
 
nav, 
 
section, 
 
summary { 
 
    display: block; 
 
} 
 
body { 
 
    font: 16px/26px Helvetica, Helvetica Neue, Arial; 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
/* Header */ 
 
.header { 
 
    height: 50px; 
 
    background: #FFE680; 
 
} 
 

 
/* Middle */ 
 
.middle { 
 
    width: 100%; 
 
    padding: 0 0 50px; 
 
    position: relative; 
 
    height: calc(100vh - 100px); 
 
} 
 
.middle:after { 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.content { 
 
    height: 100%; 
 
} 
 

 
/* Right Sidebar */ 
 
.right-sidebar { 
 
    float: right; 
 
    width: 250px; 
 
    margin-left: -250px; 
 
    position: relative; 
 
    background: #FFACAA; 
 
    height: 100%; 
 
} 
 

 
/* Footer */ 
 
.footer { 
 
    margin: -50px auto 0; 
 
    height: 50px; 
 
    background: #BFF08E; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <header class="header"> 
 
    <strong>Header:</strong>Header 
 
    </header> 
 
    <div class="middle"> 
 
    <div class="container"> 
 
     <main class="content"> 
 
     <strong>Content:</strong>Content 
 
     </main> 
 
    </div> 
 
    <aside class="right-sidebar"> 
 
     <strong>Right Sidebar:</strong>Right sidebar 
 
    </aside> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <strong>Footer:</strong>Footer 
 
</footer>

来源

2016-08-28 10:29:43 Nhan

完成了！为了简单起见，代码更改前面需要的所有内容都是.middle的高度到calc（100vh - 100px） - 此操作没有任何其他更改。谢谢:) – Laice

@Laice不客气！ – Nhan

您可以使用CSS定位，只需添加该代码。

对于.wrapper，添加

position: relative;

对于.right-侧边栏，使用

position: absolute; 
top: 0; 
right: 0; 
bottom: 0;

另外，在.right-侧边栏性能，除去

float: right; 
margin-left: -250px; 
position: relative; 
height: 100%;

希望它对你有所帮助。

来源

2016-08-28 10:28:33

我一起远一点你的答案后，谢谢。但是，一个问题是.middle的position：relative对内容的限制仍然存在，但是删除它会导致右边栏重叠标题。有什么想法吗？干杯 – Laice

CSS容器中侧边栏的高度

回答

相关问题