26
與此Demo Template開始，我想創建這樣的佈局：固定的頁眉，頁腳和側邊欄與滾動內容區域中心
但我有以下問題：
- 這兩個側邊欄不包含在可滾動內容div內。
- 內容DIV並不需要一個固定大小
- 滾動內容溢出時將其
- 如果瀏覽器的主要滾動條用於
有人可以幫我最好不出現滾動條解決這些問題？
A
回答
31
使用display:grid
這使用可能會或可能不會在您選擇的瀏覽器支持CSS的幾個新功能。這些包括Grid Layout,CSS Variables和position:sticky。 CSS變量可以用靜態值解決，Grid/position:sticky可以使用@supports優雅地降級。
/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }
.wrapper {
display: grid;
/* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
grid-template-areas:
"header header header header header"
"empty_left sidebar_1 content sidebar_2 empty_right"
"footer footer footer footer footer";
/* Only expand middle section vertically (content and sidebars) */
grid-template-rows: 0fr 1fr 0fr;
/* 100% width, but static widths for content and sidebars */
grid-template-columns: 1fr 100px 400px 100px 1fr;
/* Force grid to be at least the height of the screen */
min-height: 100vh;
}
.header {
grid-area: header;
/* Stick header to top of grid */
position: sticky;
top: 0;
/* Ensure header appears on top of content/sidebars */
z-index: 1;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: 1rem;
line-height: 1.5;
padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
--header-height: calc(1rem * 1.5 + 1rem * 2);
}
.sidebar-1 {
grid-area: sidebar_1;
}
.sidebar-2 {
grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
/* Styling to match reference */
background-color: #BC514F;
}
.content {
grid-area: content;
/* General appearance */
background-color: #99BB5E;
}
.footer {
grid-area: footer;
/* Stick footer to bottom of grid */
position: sticky;
bottom: 0;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: .8rem;
line-height: 1.5;
padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
--footer-height: calc(.8rem * 1.5 + .5rem * 2);
}
.sticky-spacer {
flex-grow: 1;
}
.sticky-content {
position: sticky;
bottom: var(--footer-height);
min-height: calc(100vh - var(--footer-height));
box-sizing: border-box;
--padding: 10px;
padding:
calc(var(--header-height) + var(--padding))
var(--padding)
var(--padding);
margin-top: calc(0px - var(--header-height));
}<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
<div class="sticky-spacer"></div>
<div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Scrollable content<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10<br><br>
line 11<br><br>
line 12<br><br>
line 13<br><br>
line 14<br><br>
line 15<br><br>
line 16<br><br>
line 17<br><br>
line 18<br><br>
line 19<br><br>
line 20
</div>
</div>
<div class="sidebar-2">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Sidebar 2 Absolute position, Fixed width<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10
</div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>滾動條在主要內容容器
內容框（包括邊欄）可以被設置爲任何類型的寬度（百分比，像素等）的。只有可滾動的內容區域會滾動（側邊欄/頁腳/標題只會溢出框）。我建議添加一些媒體查詢以突破側邊欄，以便內容不會隱藏在較小的設備上，或者在內容框中設置min-height，在body上設置min-width。
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
opacity:.8;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: red;
top:60px;
bottom:30px;
width: 100px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
background:green;
height: 100%;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>使用瀏覽器的主要滾動條
在使用瀏覽器的主要滾動條是可能的，這也導致了側邊欄與頁面滾動。
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
z-index:100;
}
.content {
position:relative;
min-height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
}
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
height:100%;
background:green;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>
1
編輯
1.增加position財產absolute您要修復的股利。
2.保持身體overflow財產auto。
注意：將body的z-index設置爲-1會使body的其餘部分不可訪問。
參考：http://limpid.nl/lab/css/fixed/
+0
感謝您發佈您的答案！請注意，你應該在這裏發佈一個答案的有用點，在這個網站上，或者你的帖子風險被刪除[參見常見問題解答，它提到的答案几乎不超過鏈接]（http://stackoverflow.com/FAQ＃刪除）。如果您願意，您可能仍然包含鏈接，但僅作爲「參考」。答案應該獨立，不需要鏈接。 – 2013-03-05 10:13:15
+0
謝謝，我今後會記住。 – Sorter 2013-03-05 10:24:32
相關問題
- 1. 固定頁眉和頁腳與自動高度，滾動內容？
- 2. Bootstrap固定頁眉和頁腳具有可摺疊側邊欄
- 3. 內容不會滾動使用頁腳和頁眉固定
- 4. 頁眉和頁腳固定，內容滾動
- 5. 固定頁眉和頁腳，在1fr CSS grid區域內具有可滾動邊欄
- 6. Flexbox的頁眉頁腳側邊欄
- 7. 只刮掉網頁的主要內容（忽略頁眉，頁腳和側邊欄）
- 8. 粘滯的頁眉和頁腳與自動滾動內容
- 9. ipad/iphone上的固定頁眉，頁腳和邊欄問題
- 10. 內容在固定頁眉和頁腳下滑動
- 11. 固定頁眉和頁腳
- 12. 的CSS固定高度的內容內beetwen頁腳和頁眉
- 13. 有可滾動內容和頁腳佈局的頁眉/內容/頁腳佈局固定到視口底部
- 14. 固定頁眉和頁腳與可變高度的雙模塊側欄
- 15. 固定頁眉和頁腳與ncurses？
- 16. 帶固定頁腳的固定側欄
- 17. 帶有固定頁眉和頁腳的asp.net可滾動gridview
- 18. 使用固定頁眉和頁腳滾動的GridView
- 19. 固定頁腳與側面導航欄
- 20. 固定頁眉和頁腳與動態內容（照片庫站點）
- 21. 帶固定側邊欄的頁面滾動
- 22. 側邊欄，可以滾動，但主要內容固定
- 23. 固定頁眉和頁腳的滾動視圖內的Android相對佈局
- 24. GridView的固定頁眉和頁腳
- 25. Reponsive側邊欄/內容區域html css
- 26. 引導側邊欄固定內容
- 27. asp.net mvc固定頁眉和頁腳
- 28. 頁眉和頁腳使固定
- 29. 二固定件（頁眉和頁腳）
- 30. 可滾動的div與浮動列中的頁眉和頁腳
非常感謝。一個問題。是否有可能從div外滾動滾動div？我的意思是無論你在頁面內滾動，我都希望它滾動滾動div。那可能嗎？ – glarkou 2012-04-07 18:06:24
是和不是（好吧，不是我有的時間）。使用瀏覽器的主滾動條可以讓側邊欄滾動。這可能對你很好，我不確定。我已將jsFiddle示例添加到我的答案中。 – 0b10011 2012-04-07 18:17:53
再次感謝隊友。 – glarkou 2012-04-07 18:29:04