CSS：將滾動條僅添加到頁面的「內容」部分

我正在處理一個Web應用程序，我想要如下所示進行佈局。由於佈局應該是響應的，頁眉或頁腳的高度是未知的。我想要實現的是將網頁垂直分佈在頁面上。頁腳應該在最底部，內容部分應該被拉伸以適應頁眉和頁腳之間的空白，只有這部分頁面是「可滾動的」。我一直在Google上搜索四個小時，因爲這似乎是一個非常簡單的事情，但我還沒有找到令人滿意的答案。因此我的代碼非常有限。CSS：將滾動條僅添加到頁面的「內容」部分

<body style="overflow: hidden; height: 100%;"> 
<div id="header">Header</div> 
<div id="content" style="overflow: scroll;">Fill this space</div> 
<div id="footer">Footer</div> 
</body>

在此先感謝！

來源

2017-01-30 Ood

易才達到使用Flexbox的。 https://www.google.com/search?q=flexbox+fixed+header+footer – CBroe

非常感謝！這看起來很有希望。我確信這是可能的，我只是不知道它叫什麼。 – Ood

你可能會喜歡slimscroll。請參閱http://rocha.la/jQuery-slimScroll鏈接。它很容易定製，也可以使用flexbox佈局。 –

您可以使用flex :)

它非常簡單易用。唯一的缺點是支持舊瀏覽器。

<body style="overflow: hidden; height: 200px; "> 
    <div id="appContainer" style="display: flex; flex-direction: column; background: yellow; height: 100%;"> 
     <div id="header" style=" background-color: red;">Header</div> 
     <div id="content" style="flex:1; overflow-y: scroll;">Fill this space</div> 
     <div id="footer" style="background-color: red;">Footer</div> 
    </div> 
</body>

https://jsfiddle.net/mwd3oqrL/

PS。身體的高度只是在jsfiddle中測試;）

來源

2017-01-30 11:39:49 kiwi1342

謝謝！ Flex是我一直在尋找的！ – Ood

這是不是像你後？

body style="height: 100%, padding: 0px" 
div id="content" style="overflow: auto; height: 80%;"

只在Firefox上測試過。

來源

2017-01-30 11:38:20 Greg

謝謝你的回答。百分比值在這裏不起作用，因爲根據查看的設備，我的標題是完全不同的高度。我認爲CSS3 flexbox是繼續這一方式的方法。 – Ood

Flex變得簡單！

body,html{ 
 
    margin:0; 
 
    height:100vh; 
 
} 
 
.container{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: #fafafa; 
 
    height: 100%; 
 
} 
 

 
.header{ 
 
    background-color:#3f51b5; 
 
    padding:1%; 
 
    color:white; 
 
} 
 
.main-content{ 
 
    flex:1; 
 
    margin:2%; 
 
    padding:2%; 
 
    background-color:white; 
 
    box-shadow:0px 0px 5px black; 
 
    overflow-y: scroll 
 
} 
 
.footer{ 
 
    background-color:#3f51b5; 
 
    padding:1%; 
 
    color:white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div class="header"> 
 
    <p>Header</p> 
 
    </div> 
 
    <div class="main-content"> 
 
    <p>content</p> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <p>Hello its scrolling!!!!!</p> 
 
    </div> 
 
    <div class="footer"> 
 
    <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

https://jsbin.com/filineheru/

來源

2017-01-30 12:12:42 Ranjith

CSS：將滾動條僅添加到頁面的「內容」部分

回答

相關問題