三欄布局（二）-------上下寬高固定，中間自適應(yīng)

Render 發(fā)布于2019-04-23 13:08 / 1110人閱讀

摘要：上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式，有種布局方式話不多說，直接上代碼。

上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式，

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

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

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