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. FSM（状态机）、HFSM（分层状态机）、BT（行为树）的区别

    游戏人工智能AI中最常听见的就是这三个词拉: FSM 这个不用说拉,百度一大堆解释, 简单将就是将游戏AI行为分为一个一个的状态,状态与状态之间的过渡通过事件的触发来形成. 比如士兵的行为有“巡逻”, ...

  2. 期权定价公式：BS公式推导——从高数和概率论角度

    嗯,自己看了下书.做了点笔记,做了一些相关的基础知识的补充,尽力做到了详细,这样子,应该上过本科的孩子,只要有高数和概率论基础.都能看懂整个BS公式的推导和避开BS随机微分方程求解的方式的证明了.

  3. Session 潜在bug防范

    注意: Session的使用一定要及时的清理,因为它是“全局”的(包括其生命周期),所以在使用Session保存状态时,不用时要及时的NULL掉,小心潜在的Bug.

  4. ios显示一个下载banner

    <meta name="apple-itunes-app" content="app-id=432274380" /> 这个标签是告诉iphone的 ...

  5. 2>&1

    经常关注linux脚本的人,一定看到过 2>&1 这样的用法,最初一定不明白其中的含义以及为什么是这样的一种组合.昨天偶然间再次看到了这个 2>&1 的写法,遂下决心搞明白 ...

  6. SDK,API,DLL名词解释

    SDK (software devalopment kit) 软件开发工具包 : 一般都是一些软件工程师Wie特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. API (A ...

  7. XCode8目录整理后的几个警告消除,Missing file

    Git目录没有及时更新导致 终端进入目录运行如下命令 git rm main.m git rm Info.plist git rm AppDelegate.h git rm AppDelegate.m ...

  8. httpie 取代 curl

    接口测试有人喜欢postman(for windows or mac) 如果长期用linux工作,可能更喜欢命令的方式,比如curl最近深入了解了下django-rest-framwork,他们推荐了 ...

  9. java中面向对象的一些知识（一）

    一:基本概念 举例:写一个程序,实现如下功能: 一群宠物,宠物有各种类型,如猫.狗.企鹅等 让这群宠物,按照各自的能力不同,进行各种比赛(如爬树.游泳.跳水):扩展性需求: 游泳比赛游泳池的参数.飞盘 ...

  10. infoq 微信后台存储架构

    infoq 上微信后台存储架构 视频很是值得认真一听,大概内容摘要如下: 主要内容:同城分布式强一致,园区级容灾KV存储系统 - sync 序列号发生器      移动互联网场景下,频繁掉线重连,使用 ...