常用CSS布局（1.左右高度固定，中間自適應 2.上下高度固定，中間自適應）

本文轉載自查看原文 2019-02-27 10:23 710 css

1.左右高度固定，中間自適應

一般有五種方法：

第一種利用浮動：

分為兩種情況：

文本高度未超過自適應div最小高度：

     <section class="layout float">
         <style>
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: #333;
             }
             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.float .center{
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left">
                 <p>111</p>
             </div>
             <div class="right"></div>
             <div class="center">
                 <p>浮動</p>
             </div>
         </article>
     </section>

文本高度超過自適應div最小高度：

<!-- 1.利用浮動 -->
     <section class="layout float">
         <style>
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: #333;
             }
             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.float .center{
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left">
                 <p>111</p>
                <p>111</p>
                <p>111</p>
                <p>111</p>
                <p>111</p>
                <p>111</p>
                <p>111</p>
             </div>
             <div class="right"></div>
             <div class="center">
                 <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
                <p>浮動</p>
             </div>
         </article>
     </section>

樣式：

第二種利用絕對定位：

文本高度未超過自適應div最小高度：

<section class="layout position">
         <style>
             .layout.position article div{
                 position: absolute;
             }
             .layout.position .left{
                 left: 0;
                 width: 300px;
                 background-color: #333;
             }
             .layout.position .right{
                 right: 0;
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.position .center{
                 left: 300px;
                 right: 300px;
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>定位</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

文本高度超過自適應div最小高度：

position

第三種利用flex布局：

文本高度未超過自適應div最小高度：

 <section class="layout flex">
         <style>
             .layout.flex{
                 margin-top: 140px;
             } 
             .layout.flex article{
                 display: flex;
             }
             .layout.flex .left{
                 width: 300px;
                 background-color: #333;
             }
             .layout.flex .right{
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.flex .center{
                 flex: 1;
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>flex</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

flex

文本高度超過自適應div最小高度：

flex

     <!-- 3.利用flex布局 -->
     <section class="layout flex">
         <style>
             .layout.flex{
                 margin-top: 140px;
             } 
             .layout.flex article{
                 display: flex;
             }
             .layout.flex .left{
                 width: 300px;
                 height: 500px;
                 background-color: #333;
             }
             .layout.flex .right{
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.flex .center{
                 flex: 1;
                 background-color: #666;
                 height: 400px;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

第四種利用table屬性：

文本高度未超過自適應div最小高度：

<section class="layout table">
         <style>
             .layout.table article{
                 height: 100px;
                 display: table;
                 width: 100%;
             }
             .layout.table article>div{
                 display: table-cell;
             }
             .layout.table .left{
                 width: 300px;
                 background-color: #333;
             }
             .layout.table .right{
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.table .center{
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>table</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

table

文本高度超過自適應div最小高度：

<section class="layout table">
         <style>
             .layout.table article{
                 height: 100px;
                 display: table;
                 width: 100%;
             }
             .layout.table article>div{
                 display: table-cell;
             }
             .layout.table .left{
                 width: 300px;
                 height: 500px;
                 background-color: #333;
             }
             .layout.table .right{
                 width: 300px;
                 background-color: #333fff;
             }
             .layout.table .center{
                 background-color: #666;
                 height: 300px;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
                <p>table</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

table

第五種利用網格grid布局：

文本高度未超過自適應div最小高度：

     <section class="layout grid">
         <style>
             .layout.grid article{
                 min-height: 100px;
                 display: grid;
                 grid-template-rows: 100px;
                 grid-template-columns: 300px auto 300px;
             }
             .layout.grid .left{
                 background-color: #333;
             }
             .layout.grid .right{
                 background-color: #333fff;
             }
             .layout.grid .center{
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>grid</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

grid

文本高度超過自適應div最小高度：

<!-- 5.利用grid屬性 -->
     <section class="layout grid">
         <style>
             .layout.grid article{
                 min-height: 100px;
                 display: grid;
                 grid-template-rows: 100px;
                 grid-template-columns: 300px auto 300px;
             }
             .layout.grid .left{
                 background-color: #333;
             }
             .layout.grid .right{
                 background-color: #333fff;
             }
             .layout.grid .center{
                 background-color: #666;
             }

         </style>
         <article>
             <div class="left"></div>
             <div class="center">
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
             </div>
             <div class="right"></div>
         </article>
     </section>

grid

根據以上示例，我們可以總結他們各自存在什么優缺點：

當div中的文本元素的高度超過容器div的高度時，
1.定位，網格布局不能撐高所在div的高度
2.浮動只能撐高所在div的高度
3.flex,和表格可以撐高整個div的高度
4.但是table不能設置每列的高度，始終高度都是一致的，為所寫div的最大高度，
5.所以flex布局是最好的自適應布局

2.上下高度固定，中間自適應

第一種利用table:

 <section class="layouttop">
         <style>
             /*沒有文本內容時，盒子需要被撐開，每個盒子都要被賦予100%的高度*/
             html,body,.layouttop,.layouttop article{
                 height: 100%;
             }
             /*可以被內容撐開*/
             .layouttop article{
                 display: table;
                 width: 100%;
             }
             .layouttop article div{
                 display: table-row;
             }
             .layouttop .top{
                 height: 200px;
                 background-color: #787878;
             }
             .layouttop .bottom{
                 height: 200px;
                 background-color: #565656;
             }
             .layouttop .middle{
                 background-color: #cd4d5d;
             }
         </style>
         <article>
             <div class="top">11</div>
             <div class="middle">
                 <p>table</p>
                 <p>table</p>
                 <p>table</p>
                 <p>table</p>
                 <p>table</p>
                 <p>table</p>
             </div>
             <div class="bottom">22</div>
         </article>
     </section>

table

第二種利用flex：

     <!-- 上下高度固定，中間自適應 -->
     <section class="layouttop">
         <style>
             /*flex上下自定義定位中，每個盒子都要被賦予100%的高度*/
             /*html,body,.layouttop,article{
                 height: 100%;
             }*/
             /*可以被內容撐開*/
             .layouttop article{
                 display: flex;
                 flex-direction: column;
             }
             .layouttop .top{
                 height: 100px;
                 background-color: #787878;
             }
             .layouttop .bottom{
                 height: 100px;
                 background-color: #565656;
             }
             .layouttop .middle{
                 flex: 1;
                 background-color: #cd4d5d;
             }
         </style>
         <article>
             <div class="top"></div>
             <div class="middle">
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
                 <p>flex</p>
             </div>
             <div class="bottom"></div>
         </article>
     </section>

flex

第三種利用絕對定位布局：

 <!-- 通過絕對定位和固定定位實現 -->
     <section class="layouttop">
         <style>
             /*flex上下自定義定位中，每個盒子都要被賦予100%的高度*/
             /*html,body,.layouttop,.layouttop article{
                 height: 100%;
             }*/
             /*可以被內容撐開*/
             .layouttop .top{
                 height: 100px;
                 top: 0;
                 background-color: #787878;
                 position: fixed;
                width: 100%;
             }
             .layouttop .bottom{
                 height: 100px;
                 bottom: 0;
                 background-color: #565656;
                 position: fixed;
                width: 100%;
             }
             .layouttop .middle{
                 top: 100px;
                 bottom: 100px;
                 background-color: #cd4d5d;
                width: 100%;
                 position: absolute;
                 /*當文本內容超出自定義高度時，出現自定義滾動條*/
                 overflow: auto;
             }
         </style>
         <article>
             <div class="top"></div>
             <div class="middle">
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
                 <p>position</p>
             </div>
             <div class="bottom"></div>
         </article>
     </section>

position

第四種利用grid網格布局：

grid

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css經典布局——頭尾固定高度中間高度自適應布局 CSS3效果：三列布局（左右固定寬，中間自適應）上下固定中間自適應布局 Css3 常用布局方式一行兩列&高度固定&某列寬度自適應使用CSS實現三欄自適應布局（兩邊寬度固定，中間自適應）關於如何實現左中右三欄布局, 左右固定寬度,中間隨屏幕自適應 CSS img 寬度固定,高度自適應 CSS實現三欄布局（左邊固定、右邊固定、中間自適應）的五種方式 CSS布局奇淫技巧之-高度自適應 CSS布局--兩欄固定中間自適應的幾種方法