有时候我们会有这样的需求，如图，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. python和shell之间变量的相互调用

    python -> shell: 1.环境变量 2.字符串连接 3.通过管道 import os var=’123’ os.popen(’wc -c’, ’w’).write(var) 4.通过 ...

  2. 使用DAO工厂创建实现类对象

    首先分析DAO模式中的每一部分 VO(对象实体):这个类成员变量与数据库中每个字段一一对应,同时提供了相应是set和get方法来设置或取得数值.这个类一般是通过IDE自动生成的 DAO(数据访问接口) ...

  3. 如何用meavn构建mahout项目

    (1)下载meavn  解压到D盘

  4. ajax示例

    ajax(Asynchronous Javascript And XML)翻译成中文就是异步的javascript和XML,即用javascript语言与服务器进行异步交互,传输的数据为XML(当然, ...

  5. 2017 Multi-University Training Contest - Team 3 hdu6060 RXD and dividing

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6060 题目: RXD and dividing Time Limit: 6000/3000 M ...

  6. CodeForces - 632E Thief in a Shop (FFT+记忆化搜索)

    题意:有N种物品,每种物品有价值\(a_i\),每种物品可选任意多个,求拿k件物品,可能损失的价值分别为多少. 分析:相当于求\((a_1+a_2+...+a_n)^k\)中,有哪些项的系数不为0.做 ...

  7. JMS API（二）

    JMS 公共API 接口共7个: 1.ConnectionFactory 2.Destination 3.Connection 4.Session 5.Message 6.MessageProduce ...

  8. linux在文件中包含某个关键词的指定行插入内容

    1. 在包含某个关键字的行上面插入一行文字 sed -i '/wangzai/i\doubi' 1.txt 把内容doubi插入到包含wangzai关键字的上一行 2. 在包含某个关键字的行下面插入一 ...

  9. 无密码ssh操作步骤备忘

    需求:A机器无密码登陆到B机器 1.A机器执行   ssh-keygen -t rsa  ,在~/.ssh/下生成id_rsa 和  id_rsa.pub两个文件,其中id_rsa.pub是公匙 2. ...

  10. Oracle中的substr()函数详解案例

    1)substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int a, int b); 格式2:substr(string string, int a ...