1. css3的盒模型，

css3中添加弹性盒模型，最新弹性盒模型是flex，之前为box

<!DOCTYPE html>

<html >

<head>

    <title>div + css宽度自适应（液态布局）</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        /*左边栏，设定宽度*/

      html,body{

         width: 100%;

         height: 100%;

        margin: 0;

      }

      #wrap{

            display: flex;

            width: 100%;

            height: 100%;

            /*css3 的盒模型设置垂直排序 新老方法 box-orient老方法  flex-direction新方法*/

            box-orient:vertical;

            flex-direction:column;

        }

        .wrap_l

        {

            height: 150px;

            width: 150px;

            background: yellow;

        }

        /*中间栏，宽度auto,*/

        .wrap_m

        {

          flex:1;

          background: blue;

        }

        </style>

</head>

<body>

    <div id="wrap">

         <div class="wrap_l">

            这是上边部分<br />

            这是上边部分<br />

            这是上边部分

        </div>

        <div class="wrap_m">

            这是下部分

        </div>

</div>

</body>

</html>

2.position: absolute;绝对布局解决方案

绝对布局主要相对它的父dom做的操作，一般父dom要有足够的空间，如果涉及嵌套太多，父dom可以设置为postion:relative

<!DOCTYPE html>

<html >

<head>

    <title>div + css宽度自适应（液态布局）</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        /*左边栏，设定宽度*/

      html,body{

         width: 100%;

         height: 100%;

         margin: 0;

      }

      #wrap{

            width: 100%;

            height: 100%;

        }

        .wrap_l

        {

            height: 150px;

            width: 150px;

            background: yellow;

        }

        /*中间栏，宽度auto,*/

        .wrap_m

        {

          position: absolute;

          top:150px;

          width: 100%;

          background: blue;

          bottom: 0px;

        }

        </style>

</head>

<body>

    <div id="wrap">

         <div class="wrap_l">

            这是上边部分<br />

            这是上边部分<br />

            这是上边部分

        </div>

        <div class="wrap_m">

            这是下部分

        </div>

</div>

</body>

</html>

3.table布局

也可以用display:table仿table布局

display:table只支持IE8+以上

<!DOCTYPE html>

<html >

<head>

    <title>div + css宽度自适应（液态布局）</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        /*左边栏，设定宽度*/

      html,body{

         width: 100%;

         height: 100%;

         margin: 0;

      }

      #wrap{

            width: 100%;

            height: 50%;

            display: table;

        }

        .wrap_l

        {

            height: 100px;

            display: table-row;

            background: yellow;

        }

        /*中间栏，宽度auto,*/

        .wrap_m

        {

          display: table-row;

          background: blue;

        }

        </style>

</head>

<body>

    <div id="wrap">

         <div class="wrap_l">

            这是上边部分<br />

            这是上边部分<br />

            这是上边部分

        </div>

        <div class="wrap_m">

            这是下部分

        </div>

         </div>

        <table style="height:50%;width:100%">

            <tr style="background: red;height:100px"><td > 上部分</td></tr>

            <tr style="background: yellow;"><td > 下部分</td></tr>

        </table>

</div>

</body>

</html>

这就最终的结果

常见css垂直自适应布局（css解决方法）的更多相关文章

  1. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  2. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  3. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  4. 演示：纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

  6. easyui 中iframe嵌套页面，大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  7. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  9. CSS兼容性问题总结及解决方法

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

随机推荐

  1. gradle多模块开发

    参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...

  2. R自动数据收集第二章HTML笔记1(主要关于handler处理器函数和帮助文档所有示例)

    本文知识点:     1潜在畸形页面使用htmlTreeParse函数 2startElement的用法 3闭包 4handler函数的命令和函数体主要写法 5节点的丢弃,取出,取出标签名称.属性.属 ...

  3. TCP学习之二：客户端与服务端的连接

    主要参考张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html TcpClient是对Socket的封装 一个TcpClient ...

  4. 《web全栈工程师的自我修养》读书笔记

    有幸读了yuguo<web全栈工程师的自我修养>,颇有收获,故在此对读到的内容加以整理,方便指导,同时再回顾一遍书中的内容. 概览 整本书叙述的是作者的成长经历,通过经验的分享,给新人或者 ...

  5. Java界面设计 Swing(1)

    Java界面设计的用途 开发者可以通过Java SE开发丰富并且强大的具有图形界面的桌面应用程序.也可以设计一些提高效率的工具软件,帮助自己处理机械性工作. Java 的图形界面工具包,可以用于工具类 ...

  6. HDU 2296 Ring -----------AC自动机，其实我想说的是怎么快速打印字典序最小的路径

    大冥神的代码,以后能贴的机会估计就更少了....所以本着有就贴的好习惯,= =....直接贴 #include <bits/stdc++.h> using LL = long long ; ...

  7. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  8. tar 解压bz2报错 Cannot exec: No such file or directory

    tar: bzip2: Cannot exec: No such file or directorytar: Error is not recoverable: exiting now 需要安装bzi ...

  9. Linux kernel 文件夹说明

    Linux 内核代码的目录结构 arch: 包含和硬件体系相关的的代码,每种硬件平台占一个相应的目录,如i386,arm, arm64, powerpc,mips等. block: 块设备驱动程序I/ ...

  10. [转]python 常用类库！

    Python学习 On this page... (hide) 1. 基本安装 2. Python文档 2.1 推荐资源站点 2.2 其他参考资料 2.3 代码示例 3. 常用工具 3.1 Pytho ...