布局问题： （ 头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll））
Posted gaoxuerong123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了布局问题： （ 头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll））相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 html,body,ul,li,p{ 10 margin: 0; 11 padding: 0; 12 } 13 html,body{ 14 height: 100%; 15 display: flex; 16 flex-direction: column; 17 } 18 .header,.footer{ 19 height: 100px; 20 background-color: #3a9; 21 } 22 .body{ 23 /* flex: 1; */ 24 flex-grow:1; 25 flex-shrink:1; 26 flex-basis: 0; 27 overflow: scroll; 28 background-color:yellow; 29 } 30 .test1{ 31 height: 300px; 32 } 33 .test2{ 34 height: 300px; 35 background-color: coral; 36 } 37 .test3{ 38 height: 300px; 39 background-color: green; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="header"></div> 45 <div class="body"> 46 <div class="test1">1</div> 47 <div class="test2">2</div> 48 <div class="test3">3</div> 49 </div> 50 <div class="footer"></div> 51 </body> 52 </html>
以上是关于布局问题： （ 头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll））的主要内容，如果未能解决你的问题，请参考以下文章
设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div,小于30