三栏布局（二）-------上下宽高固定，中间自适应

Render 发布于2019-04-23 13:08 / 1109人阅读

摘要：上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有种布局方式话不多说，直接上代码。

上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，

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

下边图片是代码运行的效果图，大家可以运行代码试试看。

自己总结的，有不对的地方欢迎大家指正！

-ＴＨＥ　ＥＮＤ-

云服务器 GPU云服务器 html5宽高自适应自适应二值化算法三栏布局 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1477.html

【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

isaced 2019-08-29 14:21 评论0 收藏0
三栏布局（一）-------左右宽高固定，中间自适应

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应，下边是我看过网上的视频后写出来的三栏布局-左右宽...

Aldous 2019-04-23 13:08 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0