有时候我们会有这样的需求，如图，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高级之scrapy-redis

    目录: scrapy-redis组件 scrapy-redis配置示例 一.scrapy-redis组件 1.scrapy-redis简介: scrapy-redis是一个基于redis的scrapy ...

  2. springBoot 整合 RabbitMQ 的坑

    1.Consumer raised exception, processing can restart if the connection factory supports it. Exception ...

  3. 文本文件显示 删除文本文件前n个字符

    #include<iostream>#include<string.h>using namespace std;void displayContent(const char * ...

  4. C# 使用windows服务发送邮件

    最近做了一个使用 C# 写了一个发送邮件的 windows 服务,在这里记录一下. 首先使用 Visual Studio 2015 创建一个 windows 服务项目. 然后在设计器上面右击添加安装程 ...

  5. 企业规范化管理系统iClap前生后世全解析

    iClap是一个产品管理系统,专注于为移动互联网企业提供企业规范化解决方案,改变传统的产品管理模式,实现产品管理场景化.APP.甚至原型图.效果图都可以直接进行批注和任务的协作,实时将你要修改的内容或 ...

  6. codeforces 70 D. Professor's task 动态凸包

    地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...

  7. yarn nodes label (yarn 划分子集群)

    yarn node labels 特性给节点打标签可以把特性类似的节点分成一组,这样可以指定特定的应用执行在特定的机器群上.现在我们只支持节点划分,1.一个节点仅能有一个节点划分,即一个节点只能打一个 ...

  8. hdp (ambari) 集成hue

    ambari-server resetambari-admin-password-reset https://github.com/EsharEditor/ambari-hue-service可以基于 ...

  9. 对java NIO 通道的一些了解

    @引言 reactor(反应器)模式 使用单线程模拟多线程,提高资源利用率和程序的效率,增加系统吞吐量.下面例子比较形象的说明了什么是反应器模式: 一个老板经营一个饭店, 传统模式 - 来一个客人安排 ...

  10. 两个java小练习

    网上看到的一个小练习,自己写了一个,但是时间限制并不符合,并且貌似还有些小问题,暂时放在这儿,代码格式什么的也不太规范. 1.班级排名时间限制: 1000ms 内存限制: 65536kB 描述 信息科 ...