CSS经典布局---自适应

头部底部固定，中间部分自适应高度，且中间部分包含左中右三部分，其中左右固定，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        .head,.footer{
            position: absolute;
            height:50px;
            width:100%;
            background: pink;
        }
        .head{
            top:0;
        }
        .footer{
            bottom:0;
        }
        .left ,.right{
            position:relative;
            width:100px;
            height: 100%;
            background-color: lightblue;            
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .center{
            position:absolute;    
            left:100px;
            right:100px;
            height: 100%;
            background-color: lightslategray;
        }
       .content{
           position:absolute;
           top:50px;
           bottom:50px;
           width: 100%;
       }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

效果如下：

本文链接：https://blog.csdn.net/Hreticent/article/details/80792534

智能推荐

Centos7搭建Hadoop3.1.3完全分布模式

详细搭建可以参考我的Hadoop2.8.0安装准备本文下载的是3.1.3版本的Hadoop 关闭防火墙虚拟机的准备安装3个虚拟机并实现ssh免密码的登录安装3个centos7虚拟机安装3个机器，机器分别叫master slave1 slave2 在/etc/hostname下修改主机名其他两台也是一样修改主机映射修改/etc/hosts文件修改这3台机器的/etc/hosts文...

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动本章的问题： 1 nandflash是flash吗？ 2 nandflash的常用接口 3 nandflash的特性是什么？ 4 ok210上s5pv210是怎么控制nandflash的 5 u-boot-2016.09.01中，nandflash的流程 6 nandflash在u-boot驱动中的关注点是什么？...

muduo库之thread类

Thread类图 Thread::start()调用的是startThread(…) 关于startThread(…)函数，它的形参是ThreadDate类，下面是该类的结构体 `struct ThreadData { typedef muduo::Thread::ThreadFunc ThreadFunc; ThreadFunc func_; string name_...

Qt音视频开发26-ffmpeg播放器

一、前言用ffmpeg来实现自己的播放器，这是一直以来的一个目标，之前的难点卡在音视频同步以及如何播放声音这两点（尽管之前已经进行过不少的尝试和探索，但是问题还是挺多，比如音视频同步不完美，有些文件正常而有些文件不准，声音播放采用的sdl总感觉多了个依赖怪怪的，而且很多初学者也反映希望采用Qt自身的类来播放），近期正好把这两个难点一一攻破了，音视频同步采用的外部时钟同步，声音播放采用的Qt自带的...

画出时钟并动态同步系统时间之二

画好了轮廓之后(关于画轮廓的内容)，我们需要做的是把时针，分针，秒针画出来，单纯地画出来其实也很简单，只要确定终点就行了，起点就是圆心。先看效果图： Talk is cheap,show you the code. 到了这里，其实主要是获取到的秒，分，时看你怎么用，把它的具体数值转换成角度，再根据角度写出终点的坐标即可实现。一开始写代码的时候我也是只获取系统的时分秒，没有精确到小数点后的，也就...

CSS经典布局---自适应

智能推荐

猜你喜欢