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. webservice 测试窗体只能用于来自本地计算机的请求

    Question: WebService部署成站点之后,如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或者"The test form is ...

  2. 【转】ORACLE的REDO与UNDO

    一.什么是redo?redo:oracle在在线或者归档重做日志文件中的记录的信息,外以出现失败时可以利用这些数据来"重放"事务.每个oracle数据都至少有二个在线重做日志组,每 ...

  3. 解决Android studio导入项目卡死

    在使用Android studio的时候常常遇到这样的问题,从github或是其他地方导入项目,Android studio呈现卡死的现象!当遇到这种情况时,可以看看是下面那种情况,在按照方法来解决! ...

  4. poi2015 bzoj4377-4386训练

    就按时间顺序写吧 完成度:10/10 3.30 bzoj4385 首先一定是删去连续d个数,然后枚举终点,起点显然有单调性,用单调队列乱搞搞就可以啦 bzoj4378 首先才结论:可行当且仅当把所有大 ...

  5. python拆分CANLog

    通过CANOE 导出的log通常有很多个ID的数据,如何才能找到某一个ID下的特殊的信号?利用python可以简单的进行这个步骤,代码如下: 说明: 最终的效果是将log信息,分不同的ID进行拆分,并 ...

  6. 【转】Inode详解

    Inode详解 转自: Inode详解   一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存 ...

  7. Robot Framework用户手册 (版本：3.0）

    版权信息:诺基亚网络和解决中心 本翻译尊重原协议,仅用于个人学习使用 1.开始: 1.1 介绍: Robot Framework是一个基于Python的,为终端测试和验收驱动开发(ATDD)的可扩展的 ...

  8. Ajax加载菊花loding效果

    Ajax 异步请求的时候,一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外 ...

  9. go：channel（未完）

    注:1)以下的所有讨论建立在包含整形元素的通道类型之上,即 chan int 2)对于“<-”我的理解是,它可能是一个操作符(接收操作符),也  可能是类型的一部分(如“chan<- in ...

  10. IE11兼容性问题修改

    最近测试给了我一大堆BUG,一瞅发现全是IE11的.吐槽一下这个浏览器真的比较特立独行.很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍.但是当需 ...