響應式布局中的全高側邊欄
[英]Full-height sidebar in Responsive Layout
問題描述
我正在嘗試使用全高側邊欄創建響應式布局。 在桌面上，側邊欄應浮動在主要內容的左側，在平板電腦/移動設備上，側邊欄應與主要內容重疊（激活時）。 我已經設法讓這個布局適用於桌面，雖然我使用主要內容的背景顏色使其“看起來”像側邊欄是全高，這是不理想的，但似乎無法包裝我對如何使這個平板電腦/移動設備工作有所了解。 請參閱圖片以更好地解釋我想要實現的目標。 當窗口縮小不到980px時，身體似乎想要留在980.任何幫助都將非常感激
#sidebar { background: #FFF8DC; width: 300px; float: left; height: 100vh; margin-right: -300px; position: absolute; top: 0; left: 0; } #main-content { float: left; width: 100%; padding-left: 300px; background: #2373DE; } @media screen and (max-width: 991px) and (min-width: 768px) { #main-content { padding-left: 0; } #sidebar { z-index: 9; } }
<body> <section id="sidebar"> sidebar stuff </section> <section id="main-content"> main content stuff <footer> footer stuff </footer> </section> </body>
1 個解決方案
解決方案1
0 2017-06-08 19:40:43
這是一個解決方案，使側邊欄固定在左側，屏幕高度為100％，主要內容為滾動。 您可以更改媒體查詢中側邊欄和主要內容的屬性（寬度，邊距左側）以獲得所需的布局。
#sidebar { background: #FFF8DC; top: 0; left: 0; display: flex; flex-direction: column; height: 100%; justify-content: space-between; overflow-y: auto; position: fixed; width: 300px; } #main-content { margin-left: 300px; } @media screen and (max-width: 991px) and (min-width: 768px) { #sidebar { width: 200px; } #main-content { margin-left: 200px; } }
<body> <section id="sidebar"> sidebar stuff </section> <section id="main-content"> main content stuff <footer> footer stuff </footer> </section> </body>
Bootstrap 4.0 - 帶有圖像 + 導航欄 + 全高主體的響應式標題
[英]Bootstrap 4.0 - responsive header with image + navbar + full-height body
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.