简体   繁体   English

CSS:仅将滚动条添加到页面的“内容”部分

[英]CSS: Add scrollbar only to “content” part of page

I am working on a web app which I want to layout as shown below. 我正在开发一个Web应用程序,其布局如下图所示。 Since the layout should be responsive the height of the header or footer are unknown. 由于布局应响应,因此页眉或页脚的高度未知。 What I want to achieve is to spread the web page vertically across the page. 我要实现的是将网页垂直分布在整个页面上。 The footer should be at the very bottom and the content part should be stretched to fit the gap between header and footer, with only this part of the page being "scrollable". 页脚应该在最底部,内容部分应该被拉伸以适合页眉和页脚之间的间隙,只有页面的这一部分是“可滚动的”。 I've been googling four hours since this seems like a pretty straightforward thing to do, but I have not yet found a satisfying answer. 我已经搜索了四个小时,因为这似乎很简单,但是我尚未找到令人满意的答案。 My code therefore is very limited. 因此,我的代码非常有限。

<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>

Thanks in advance! 提前致谢!

You can use flex :) 您可以使用flex :)

it's very simple and ease to use. 它非常简单易用。 Only downside is support for old browsers. 唯一的缺点是对旧浏览器的支持。

<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/ https://jsfiddle.net/mwd3oqrL/

ps. PS。 the body height is just to test it in jsfiddle ;) 身体高度只是为了在jsfiddle中进行测试;)

Flex made easy!! 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/ https://jsbin.com/filineheru/

Is this something like you are after? 这是您想要的吗?

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

Only tested on Firefox. 仅在Firefox上测试过。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM