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. 各种Js封装

    获取ClassName元素 function getClass(classname,id){ if(document.getElementsByClassName){ if(id){ return $ ...

  2. nodeJS爬虫---慕课网

    源代码一(爬取html源码) //引入http模块var http = require('http');//引入url地址var url = 'http://www.imooc.com/learn/2 ...

  3. Yii2 认证实现原理和示例

    Yii的用户认证分为两个部分,一个是User组件,负责管理用户认证状态的,包括登录,登出,检测当前登录状态等,源文件位于vender/yiisoft/yii2/web/User.php.另一个是实现接 ...

  4. IOS与Android APP界面设计规范要点

    IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...

  5. ORA-01033 ORACLE 正在初始化或关闭

    (借鉴:该方法本人亲自操作过,解决了问题!) 解决连接ORACLE错误一例:ORA-01033: ORACLE 正在初始化或关闭 客户发现连接数据库有问题,错误有: ORA-01033: ORACLE ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. PostgresSQL的安装与基本命令使用

    安装与配置 yum install http://yum.postgresql.org/9.5/redhat/rhel-7-x86_64/pgdg-redhat95-9.5-2.noarch.rpm ...

  8. Activity系列讲解---Activity运行时的屏幕方向，全屏，窗体模式的设置

    Android内置了方向感应器的支持.Android会根据所处的方向自动在竖屏与横屏间切换.但是有的应用程序只能在横/竖屏时运行,比如某些游戏,此时我们要锁定该Activity运行时的屏幕方向,< ...

  9. MVC安全防护

    一.XSS攻击 跨域脚本攻击(Cross Site Scripting),恶意植入前端代码,比如HTML代码和客户端脚本,异常js获取用户cookie然后跳转到别的站点. 防护措施 标签转换(如&qu ...

  10. JavaBean的用法

    JavaBean是一个可重复使用的软件组件,是用Java语言编写的.遵循一定标准的类. JavaBean是Java Web的重要组件,它封装了数据和操作的功能类,供JSP和Servlet调用,完成数据 ...