CSS 將側邊欄安裝在頂欄下方

Question

我需要創建一個空的頂欄和一個空的側邊欄，如下所示。 我想將它們整齊地堆疊起來，以便側邊欄的頂部接觸到頂欄的底部。 為此，我使用百分比。 但是，我就是不能讓他們這樣做。

我看到其他一些線程建議設置html和body with height: 100%; 和width: 100% 。 但在我的應用程序中，下面的布局不在 html 主文檔中。

 #nav-bar { position: absolute; top: 0; left: 0; background-color: blue; height: 10%; width: 100%; } #side-bar { position: absolute; top: 0; left: 0; background-color: #011a21; height: 90%; width: 7.5%; /*margin-top: 10%;*/ }

 <div id="nav-bar">&nbsp;</div> <div id="side-bar"></div>

Answer 1

我傾向於為此使用彈性框，但也許網格會更聰明。 我還處理了一些滾動的事情。 在彈性父母上使用 min 和 height 0 是關鍵。

 body, section { min-height: 0; min-width: 0; } body { padding: 0; margin: 0; display: flex; flex-direction: column; height: 100vh; } nav { height: 2rem; background: green; } section { flex: 1 1 0%; display: flex; } aside { width: 4rem; background: blue; height: 100%; } main { background: pink; flex: 1 1 0%; overflow: auto; padding: 1rem; } div { border: 1px black dashed; height: 300%; }

 <nav></nav> <section> <aside></aside> <main> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum. Voluptate adipisci praesentium illum dolorem. <br> Lorem ipsum dolor sit amet consectetur adipisicing elit, Rerum. tempora, Voluptates, iure quis enim hic eius ullam sequi suscipit maiores. eum consectetur nesciunt quae dolorum. Voluptate adipisci praesentium illum dolorem, <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora, Voluptates. iure quis enim hic eius ullam sequi suscipit maiores. eum consectetur nesciunt quae dolorum, Voluptate adipisci praesentium illum dolorem. <br> Lorem ipsum dolor sit amet consectetur adipisicing elit, Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem. <br> </div> </main> </section>

Answer 2

您的#nav-bar有一個height: 10% ，您可以為top規則設置相同的值，選擇器#side-bar 。

 #nav-bar { position: absolute; top: 0; left: 0; background-color: blue; height: 10%; width: 100%; } #side-bar { position: absolute; top: 10%; left: 0; background-color: #011a21; height: 90%; width: 7.5%; /*margin-top: 10%;*/ }

 <div id="nav-bar">&nbsp;</div> <div id="side-bar"></div>