溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS怎么實現頭部和底部固定中間出現滾動條”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
原理說明
利用flex布局，很容易實現“左右兩邊固定，剩余100%”的布局模式
利用flex-direction: column;樣式，就很容易實現“頂部和底部固定，中間100%”的情況
要設置html,body的高度為100%;否則設置的div高度為100%是0px;
必須要保證設置的控件高度從html>body>div>....>div 需要一層一層的繼承下來
案例（原理說明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*設置html和body的高度為顯示屏的高度*/
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
/*布局方向是垂直的*/
flex-direction: column;
width: 100%;
height: 100%;
}
/*設置頂部和底部的高度*/
.header, .footer {
height: 40px;
line-height: 40px;
background-color: #D8D8D8;
text-align: center;
}
/*設置高度是跟父元素的高度一致，100%；*/
/*實際高度是 100% 減去頂部高度和底部高度，左右兩邊固定，中間是剩余100%原理一致*/
.main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
overflow: auto;
}
</style>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
<div style="height: 300%">彈性滾動區域</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
案例二（回字形布局）
利用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html,body{
height: 100%;
margin: 0;
}
.wrap{
display: flex;
flex-direction: column;
height: 100%;
}
.header{
height: 50px;
padding: 15px;
}
.footer{
height: 50px;
}
.main{
flex-grow: 1;
overflow: auto;
display: flex;
align-items: flex-start;
}
.left{
width: 300px;
background: yellowgreen;
}
.right{
width: 300px;
background: greenyellow;
}
.center{
flex-grow: 1;
background: aquamarine;
height: 100%;
overflow: auto;
}
</style>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
<div class="left">
left
</div>
<div class="center">
<div style="height: 300%">
<div>center</div>
</div>
</div>
<div class="right">
right
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
設置html和body的高度為100%，則body的高度是顯示器的高度
利用flex布局，頭部和底部固定，中間設置為剩下的100%
中間部分，利用flex布局，左右兩邊固定，中間是剩下的100%
設置“中心”的高度為100%，則是參照父元素的高度，除去頂部和底部的高度的，剩下的100%高度
案例 （計算出中間組件的高度，剩下的百分百）
設置html和body的高度為100%，則body的高度為顯示器的高度，則子元素的高度是參考body的
頭部和底部固定，計算出中間的高度
利用flex布局，左右兩邊固定，中間為剩下的100%
高度設置為父元素的100%；中間如果內容過多，則設置overflow:auto就會出現滾動條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html,body{
margin: 0;
height: 100%;
}
.flex-study{
line-height: 35px;
height: calc(100% - 100px);
}
.flex{
display: flex;
}
.header{
width: 100%;
background: #42a5f6;
}
.content{
width: 100%;
background: bisque;
align-items: flex-start;
height: 100%;
overflow: hidden;
}
.left{
width: 300px;
background: yellowgreen;
}
.right{
width: 300px;
background: greenyellow;
}
.center{
flex-grow: 1;
background: aquamarine;
height: 100%;
overflow: auto;
}
.footer{
width: 100%;
background: blueviolet;
}
</style>
<body>
<div class="flex-study">
<div class="header">
header
</div>
<div class="content flex">
<div class="left">
left
</div>
<div class="center">
<div style="height: 300%">
<div>center</div>
</div>
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
“CSS怎么實現頭部和底部固定中間出現滾動條”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
