有时候我们会有这样的需求，如图，aside是导航或者某些链接，右边的main是显示重要的内容，左边需要定宽，右边的main能够自适应剩余的宽度：

　

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>test</title>

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

    <meta http-equiv="Content-Language" content="zh-CN" />

    <meta name="Keywords" content="" />

    <meta name="Description" content="" />

    <!-- <link rel="stylesheet" href="style/.css" type="text/css" /> -->

    <style type="text/css">

        *{margin:0; padding:0;}

        /* div{border:1px solid #CCC;} */

        .home{width:70%; min-width:270px;margin:0 auto;}

        .header{height:80px; width:100%; background:#CCC}

        .nav{height:50px; width:100%; background:#bbb}

        .content{}

        .content .aside{width:260px; height:400px; float:left; background:#999}

        .content .main{height:400px; margin-left:260px; overflow:hidden;zoom:1; background:#eee}

        .footer{height:80px; background:#888;}

    </style>

</head>

<body>

    <div class="home">

        <div class="header">

            header

        </div>

        <div class="nav">

            nav

        </div>

        <div class="content">

            <div class="aside">aside</div>

            <div class="main">main</div>

        </div>

        <div class="footer">

            footer

        </div>

    </div>

</body>

</html>

CSS 左边div固定，右边div自适应的更多相关文章

  1. HTML左边盒子固定,右边盒子自适应

    html: <div class="box1"> <div class="divA">DIVA</div> <div ...

  2. css-两个div并排，左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  3. flex 上下div固定, 中间div自适应

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  5. 【HTML+CSS】右侧固定，左侧自适应布局

    <style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ m ...

  6. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  7. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

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

  8. css实现左边div固定宽度，右边div自适应撑满剩下的宽度

    (1)使用float <div class="use-float"> <div></div> <div></div> & ...

  9. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

随机推荐

  1. 机器学习算法（优化）之二：期望最大化（EM）算法

    EM算法概述 (1)数学之美的作者吴军将EM算法称之为上帝的算法,EM算法也是大家公认的机器学习十大经典算法之一.EM是一种专门用于求解参数极大似然估计的迭代算法,具有良好的收敛性和每次迭代都能使似然 ...

  2. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

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

  3. PageObject模式的层次结构

    做过UI自动化的都晓得,在做UI自动化时定位特别依赖页面,一旦页面发生变更就不得不跟着去修改页面定位. 在webdriver中,假设你想对一个元素定位操作,那么你可能会编写下面的代码: driver. ...

  4. 安装mysql8.0.11以及修改root密码、连接navicat for mysql。

    最近在学习node.js,少不得要跟数据库打交道,于是打算安装一个数据库软件,在mongedb和mysql之间选择了mysql.作为一个数据库新人不敢评论孰好孰坏,最后选择mysql纯属因为公司在用m ...

  5. 百度nlp实习生转岗（猝）

    一面: 大部分是问项目相关的.只记住了几个关键的问题. 1.手写快排 2.生成模型与判别模型的区别 分类问题:2种形式: F(x)=y p(y|x) 生成模型:由数据学习联合分布概率p(x,y),然后 ...

  6. Python中常用技巧整理

    Python中os.path的妙用  http://xpleaf.blog.51cto.com/9315560/1736956

  7. android 如何获取当前的Activity类名

    比如友盟统计页面停留时间,咱们需要知道当前页面停留了多久. 一般我们都有一个父类Activity,用下面的方法可以获得完整的包名.类名结构 this.getLocalClassName() 输出如下: ...

  8. 前端JS复制特定区域的文本(兼容safari)

    html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖flash. 代码如下: /* 创建range对象 */ const range = docume ...

  9. Python 实例2—购物车

    老男孩教学学习笔记 """启动程序后,让用户输入工资,然后打印商品列表允许用户根据商品编号购买商品用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒可随机退出,退出 ...

  10. Selenium+Python定位实例

    常见的定位方式参见:http://www.cnblogs.com/ranxf/p/7928732.html 1.ID定位(find_element_by_id) <input class=&qu ...