三欄佈局（二）-------上下寬高固定，中間自適應

-Advertisement-

上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種佈局方式，話不多說，直接上代碼。下邊圖片是代碼運行的效果圖，大家可以運行代碼試試看。自己總結的，有不對的地方歡迎大家指正！ ...

上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種佈局方式，

有4種佈局方式： position; flex; table; grid; 話不多說，直接上代碼。

<!DOCTYPE html>
<html>
<head>
    <title>上中下三欄佈局</title>
    <style type="text/css">
        html * {
            padding: 0;
            margin: 0;
        }
        html, body{
            height:100%;
        }
        .layout{
            width: 200px;
            height: 100%;
            display: inline-block;
                overflow: hidden;
        }
        .layout .three_columns > div{
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 第一種佈局：position -->
    <section class="layout position">
        <style type="text/css">
            .layout.position .top{
                position: absolute;
                top: 0;
                height: 200px;
                background: #90D9F7;
            }
            .layout.position .middle{
                position: absolute;
                top: 200px;
                bottom: 200px;
                background: pink;
            }
            .layout.position .bottom{
                position: absolute;
                bottom: 0;
                height: 200px;
                background: #F5DE25;
            }
            .clear{ clear:both} 
        </style>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>position佈局</h1>
            </div>
            <div class="bottom">下</div>
            <div class="clear"></div> 
        </article>

    </section>

    <!-- 第二種佈局：flex -->
    <section class="layout flexbox">
        <style type="text/css">
            .layout.flexbox{
                margin-left: 20px;
                height: 100%;
            }
            .layout.flexbox .three_columns{
                width: 200px;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .layout.flexbox .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.flexbox .middle{
                flex: 1;
                background: pink;
                overflow: auto;
            }
            .layout.flexbox .bottom{
                height: 200px;
                background: #F5DE25;
            }
        </style>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>flexbox佈局</h1>
            </div>
            <div class="bottom">下</div>
            
        </article>

    </section>

    <!-- 第三種佈局：table -->
    <section class="layout table">
        <style type="text/css">
            .layout.table{
                margin-left: 20px;
                height: 100%;
            }
            .layout.table .three_columns{
                width: 200px;
                height: 100%;
                display: table;
            }
            .layout.table .three_columns > div{
                display: table-row;
                vertical-align: middle;
            }
            .layout.table .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.table .middle{
                background: pink;
                overflow: auto;
            }
            .layout.table .bottom{
                height: 200px;
                background: #F5DE25;
            }
        </style>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>table佈局</h1>
            </div>
            <div class="bottom">下</div>
            
        </article>
    </section>
    <!-- 第四種佈局：grid -->
    <section class="layout grid">
        <style type="text/css">
            .layout.grid{
                margin-left: 20px;
                height: 100%;
            }
            .layout.grid .three_columns{
                width: 200px;
                height: 100%;
                display: grid;
                grid-template-rows: 200px auto 200px;
                grid-template-columns: 200px;
            }
            .layout.grid .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.grid .middle{
                background: pink;
                overflow: auto;
            }
            .layout.grid .bottom{
                height: 200px;
                background: #F5DE25;
            }
        </style>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>grid佈局</h1>
            </div>
            <div class="bottom">下</div>
            
        </article>
    </section>
</body>
</html>

下邊圖片是代碼運行的效果圖，大家可以運行代碼試試看。

自己總結的，有不對的地方歡迎大家指正！

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Vue 基礎指令學習

學習Vue的一些總結，第一次寫博客，文筆實在是很差不過我會不斷寫的。這裡只寫了一部分常用的vue的指令，後面還會有的。 ...
08 . 12/3 事件對象

12.3事件對象 1.每個元素身上的事件都是天生自帶的，不需要我們去定義，只需要我們給這個事件綁定一個方法， 2.事件綁定的寫法 1.div.onclick=function(){} DOM 0級事件綁定 2.div.addEventListener()或div.attachEvent()　DOM2 ...
前端面試題（一）JS篇

內置類型 JS 中分為七種內置類型，七種內置類型又分為兩大類型：基本類型和對象（Object）。基本類型有六種：，`undefined boolean number string symbol`。其中 JS 的數字類型是浮點類型的，沒有整型。並且浮點類型基於 IEEE 754標準實現，在使用中 ...
上傳文件進度條（筆記）

參考資料：CSDN-真實的上傳進度條 ...
前端入門11-JavaScript語法之數組

聲明本系列文章內容全部梳理自以下幾個來源：《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，在其基 ...
react-router的簡單使用

React Router是一個基於React之上的強大路由庫，可以讓你嚮應用中快速的添加視圖和數據流，同時保持頁面與URL間的同步。 1.安裝： 2.問題說明：剛開始的時候由於沒有註意到版本信息，導致出現了一些錯誤，現在記錄如下：這是我package.js中的版本信息，說明1：react-ro ...
webpack4配置詳解之常用插件分享

"前言" 繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件，如有分析不到位的，歡迎糾錯，嗯，這些東西文檔都有，大佬可繞過。 Wepack4之後廢棄了很多的插件，這裡只會講解webpack4還支持的（），已經廢棄的將不再闡述。 ...
自定義裝點博客的“門面”（不定期更新）

初來乍到，算是一個博客園的新人，受了園裡許多前輩的啟發正在一點點定製自己的小空間。也希望我的文章能夠成為大家DIY的啟發，就算是拋磚引玉了。效果可以直接在我的博客中看到，所以不另外貼圖了。引入js文件與css文件引入js文件需要先申請js許可權，語言誠懇一點幾個小時(?)就可以拿到許可權了。引入 ...