有时候我们会有这样的需求，如图，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. TensorFlow学习笔记（一）--windows系统安装配置

    1.关于Tensorflow 国际惯例,先来个总体的简要介绍,摘自一个很强大的TensorFlow中文学习网站(http://www.tensorfly.cn/)的简介 TensorFlow™ 是一个 ...

  2. bat命令运行java程序

    注意空格 本文主要介绍在window下bat批处理文件调用java的方法. @echo off echo 正在加密,请稍后....echo path:%~dp0 set base=%~dp0 set ...

  3. POJ1159:Palindrome(LCS小应用 回文）

    地址:http://poj.org/problem?id=1159 题目需求: 给你一个字符串,求最少添加多少字符可以使之构成回文串. 题目解析: 简单做法是直接对它和它的逆序串求最长公共子序列长度l ...

  4. Mac打开应用提示已损坏的解决办法

    相信很多升级了最新Mac系统的用户在打开一些应用的时候都会出现“应用XX已损坏”的系统提示,安装这些应用的时候总是提示“已损坏,移至废纸篓”这类信息,根本无法打开应用. Mac打开应用提示已损坏的解决 ...

  5. vim文本编辑操作

    文本选择操作        为了方便地选取文本块,Vim编辑器引入了可视模式(Visual Mode).要选取一段文本块,操作步骤如下:        ▶ 将光标移动到要复制文本块的开始处.要注意的是 ...

  6. python全栈开发从入门到放弃之socket并发编程多线程GIL

    一 介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...

  7. php等守护进程监控脚本（转载 http://www.9958.pw/post/php_script_scan）

    此脚本用户守护监控进程的执行情况,因为有的时候,我们用各类开发语言做的守护进程可能会因为一些特殊情况被退出,所以此脚本就是为了重启这些进程 代码: #!/bin/bash EMAIL='9958_pw ...

  8. SQL Server WITH ROLLUP、WITH CUBE、GROUPING语句的应用

    CUBE:CUBE 生成的结果集显示了所选列中值的所有组合的聚合. ROLLUP:ROLLUP 生成的结果集显示了所选列中值的某一层次结构的聚合. GROUPING:当行由 CUBE 或 ROLLUP ...

  9. 50条常用liunx命令整理

    1.pwd命令 :确定自己在那个目录 使用方法:在liunx命令输入框里面输入pwd,自动就会显示出自己现在在那个目录下 操作截图: 此时正处在root目录里面 2.cd命令:切换目录的意思 使用方法 ...

  10. C++之旅：拷贝构造与友元

    拷贝构造与友元 拷贝构造是在构造一个对象的时候将已有对象的属性拷贝给新的对象:友元可以让一个类的所有属性(主要是private)对特定的类开放 拷贝构造 如果没有复写拷贝构造函数,系统会帮我们默认生成 ...