Div float保持固定並且視口的高度為100％

Question

我正在嘗試為CSS網站制作一個基本的響應結構。 到目前為止，我已經設法制作了三個列div，一個菜單，一個側邊欄和一個內容。

我現在想要實現的是將菜單和側邊欄設置為視口高度的100％並固定，以便內容div是“可滾動的”但是無論有多少內容，菜單和側邊欄都保持在頂部在col content列中。 當然，我不希望在媒體查詢中發生這種情況。

如何使用CSS最有效地實現這一目標。 我是否必須重新構建HTML中的div或者有沒有辦法用CSS實現這一點？

 /* SECTIONS */ .section { clear: both; } /* COLUMN SETUP */ .col { display: block; float: left; } /* GRID OF THREE */ .menu { width: 33%; background-color: #98D2ED } .sidebar { width: 33%; background-color: #D3ADAD } .content { width: 33%; background-color: #C9E4D1 } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 480px) { .menu { width: 100%; } .sidebar { width: 100%; } .content { width: 100%; } } 

 <div class="section"> <div class="col menu"> <p> Menu </p> I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px. </div> <div class="col sidebar"> <p> Sidebar </p> I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px. </div> <div class="col content"> Content </div> </div> 

我想要實現的目標：

Answer 1

您可以使用flexbox，對於已知/未知的寬度和高度元素，關鍵是將內容區域設置為overflow:auto ，並將flex-direction切換到媒體查詢中的column 。

的jsfiddle

 html, body { height: 100%; } body { margin: 0; display: flex; } .content { flex: 1; overflow: auto; } .menu { background: grey; } .sidebar { background: silver; } @media (max-width: 480px) { body { flex-direction: column; } } 

 <div class="menu">Menu</div> <div class="sidebar">Sidebar</div> <div class="content"> <!-- scroll test --> <div style="height:1000px;">Content</div> </div> 

或者，將菜單和側邊欄設置為position:fixed的傳統方式position:fixed 。

的jsfiddle

 html, body { height: 100%; margin: 0; } body { margin-left: 200px; } .menu, .sidebar { position: fixed; top: 0; height: 100%; overflow: auto; } .menu { left: 0; width: 100px; background: grey; } .sidebar { left: 100px; width: 100px; background: silver; } .content { overflow: auto; } @media (max-width: 480px) { body { margin: 100px 0 0; overflow: hidden; } .menu, .sidebar { left: 0; width: 100%; height: 50px; } .sidebar { top: 50px; } .content { height: calc(100% - 100px); } } 

 <div class="menu">Menu</div> <div class="sidebar">Sidebar</div> <div class="content"> <!-- scroll test --> <div style="height:1000px;">Content</div> </div> 

Answer 2

據我所知，你希望你的.menu和.sidebar在一個地方粘在屏幕上，讓內容可以滾動。 並且還為其他東西添加了更多的代碼，我知道這聽起來很模糊，但寫下所有東西都是浪費時間，因為我已經編輯了你我完成了復制，並且我有筆記解釋了我所有的變化（和這樣做的原因）在下面的代碼中。

我刪除了float和它們的class ，因為我認為那些不是必需的，並且float的弊大於利。 同時將.content移動到中間列（ .menu和.sidebar之間）。 但是，如果您需要，請隨時更改這些內容中的任何一個。

---

這是更新的代碼:(這里是一個JSFiddle： JSFiddle ）

我知道.menu上方設有怪異空間（運行段和的jsfiddle時），但我有它住在我的網站在這里 ，和它的行為完全正常，並使用相同的代碼。

 * { margin: 0px; /* Added to remove margin from everything */ padding: 0px; /* Added to remove margin from everything */ } .section, .menu, .sidebar, .content { display:inline-block !important; /* Added so they will line up next to each other */ } .section {width:100%;} /* Pretty self explanatory, added to set ".section" to a width of 100% */ /* GRID OF THREE */ .menu { width: 33%; /* Was already here */ background-color: #98D2ED; /* Was already here */ height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */ position: fixed; /* Makes it stay "fixed" to one place on the screen */ } .sidebar { width: 33%; /* Was already here */ background-color: #D3ADAD; /* Was already here */ position:absolute; top:0px; left: 67%; /* To make the element in the right place, add the width of "menu" and "content" */ height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */ position: fixed; /* Makes it stay "fixed" to one place on the screen */ } .content { width: 34%; /* Was already here, but changed it to 34 to make the website fill the page */ background-color: #C9E4D1; /* Was already here */ position:absolute; top:0px; left:33%; /* To make the element in the right place, make this the width of "menu" */ } /* The CSS below this was already here */ /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 480px) { .menu { width: 100%; } .sidebar { width: 100%; } .content { width: 100%; } } 

 <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <div class="section"> <div class="menu"> Menu </div> <div class="content"> Content </div> <div class="sidebar"> Sidebar </div> </div> 

真希望有所幫助！