有时候我们会有这样的需求，如图，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学习笔记（二）文件操作和集合

    集合: 集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据 集合的作用: 1.它可以把一个列表中重复的数据去掉,而不需要你再写判断 2.可以做关系测试, ...

  2. karma安装

    Last login: Sat Jun :: on ttys000 ➜ ~ cd /Users/wangyizhe/Projects/work/smartcmp/services/new-yacmp/ ...

  3. Boinformatics-2018-10-1-目录

    1.基因分析 --Using standard microbiome reference groups to simplify beta-diversity analyses and facilita ...

  4. JQuery可以轻松实现数字框

    如果使用JQuery,则可以轻松实现数字框. <input type="text" name="name" value="0" run ...

  5. win7 64bits下编译libjpeg库

    一.下载源代码.下载地址:http://www.ijg.org/.注意:一定要下载win32 版本二.编译源代码.       1.解压源代码,(不需要修改,修改报错)修改源代码中jconfig.vc ...

  6. nfs 安装及使用

    安装 引用: https://zerlong.com/537.html Windows Server2012搭建NFS服务器 2017-06-01 5739 Views 1153 Times 开启NF ...

  7. 基于TSUNG对MQTT进行压力测试-基础概念温习

    [单台Broker压测结果]请移步另一篇博客:http://www.cnblogs.com/lingyejun/p/7941271.html 一.TCP报头部中的SYN.FIN.ACK: ACK : ...

  8. nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)解决

    nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) 报错信息 nginx: [emerg] bind() t ...

  9. 关于hibernate插入数据到mysql数据库中文乱码问题的解决

    要想解决这个问题就要找到问题的症结所在 1.首先将数据提交到action输出看action里的数据是不是中文乱码,结果很遗憾并不是这里的问题 2.设置数据库连接url: 3.打开mysql安装文件里的 ...

  10. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...