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容器中側邊欄的高度

回答

相關問題