zoukankan      html  css  js  c++  java
  • 【原创】关于高度自适应问题

    height自适应问题困扰许久,尝试多种方法,有一种觉得较为方便,利用position定位,top和bottom同时存在,强制性盒模型,实例如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="utf-8">
     5 <link type="text/css" rel="stylesheet" href="style.css">
     6 </head>
     7 <body>
     8 <header></header>
     9 <div id="container">
    10     <div class="container-left"></div>
    11     <div class="container-right"></div>
    12 </div>
    13 
    14 
    15 </body>
    16 </html>
     1 @charset "utf-8";
     2 
     3 html,body,header,div{
     4     padding:0px;
     5     margin:0px;
     6     font-size:14px;
     7 }
     8 header{
     9     width:100%;
    10     height:60px;
    11     background-color:#2189BE;
    12     position:fixed;
    13 }
    14 
    15 #container{
    16     width:100%;
    17     position:absolute;
    18     top:60px;
    19     left:0px;
    20     bottom:0px;/*这里一定要top和bottom一起写,强制盒模型*/
    21 }
    22 
    23 #container .container-left{
    24     width:25%;
    25     background-color:#2B2E3D;
    26     position:absolute;
    27     left:0px;
    28     bottom:0;
    29     top:0px;
    30 }
    31 
    32 #container .container-right{
    33     background-color:#EDEDED;
    34     width:75%;
    35     position:absolute;
    36     right:0px;
    37     top:0px;
    38     bottom:0;
    39 }
  • 相关阅读:
    jumpserver sudo 权限控制模板
    nmap 端口扫描
    服务器常用性能测试脚本
    Mac 配置cron
    cURL的用法,加用户名和密码?
    mac 终端查看端口命令
    Mac电脑安装openresty
    BT详解,BT原理
    centos 7 添加swap
    centos 添加rpmfusion源,yum 安装 ffmpeg
  • 原文地址:https://www.cnblogs.com/pm-dongjian/p/5457674.html
Copyright © 2011-2022 走看看