有时候我们会有这样的需求，如图，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爬虫 （一） 爬虫基础了解，urllib

    • URL的含义: 统一资源定位符,结构: URL的格式由三部分组成: ①第一部分是协议(或称为服务方式). ②第二部分是存有该资源的主机IP地址(有时也包括端口号). ③第三部分是主机资源的具体地址 ...

  2. spring MVC中的异常统一处理

    1.spring MVC中定义了一个标准的异常处理类SimpleMappingExceptionResolver 该类实现了接口HandlerExceptionResolver 2.看下SimpleM ...

  3. 如何用 PyCharm 调试 scrapy 项目

    原理: 首先 scrapy 命令其实就是一个python脚本,你可以使用 which scrapy 查看该脚本的内容: from scrapy.cmdline import execute sys.a ...

  4. nginx 413 request entity too large解决办法

    nginx 出现:413 request entity too large,一般是在上传图片的时候,上传的图片大小超过了服务器设置的最大上传大小,需要修改nginx和PHP的设置: (1)打开 /us ...

  5. Python函数参数*args和**kwargs

    1. Python中使用*args和**kwargs #!/usr/bin/env python3 # coding: utf-8 # File: args_kwargs_demo.py # Auth ...

  6. STL make_heap push_heap pop_heap sort_heap

    make_heap: default (1) template <class RandomAccessIterator> void make_heap (RandomAccessItera ...

  7. 基于java的网络爬虫框架(实现京东数据的爬取，并将插入数据库)

    原文地址http://blog.csdn.net/qy20115549/article/details/52203722 本文为原创博客,仅供技术学习使用.未经允许,禁止将其复制下来上传到百度文库等平 ...

  8. 2、css

    web 前端2 CSS   CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 ...

  9. Kafka（一）

    1.安装zookeeper集群 2.下载kafka    wget http://mirror.bit.edu.cn/apache/kafka/1.0.0/kafka_2.11-1.0.0.tgz 配 ...

  10. server2003 IIS 错误 解决

    网页无法打开总显示: 无法找到该页您正在搜索的页面可能已经删除.更名或暂时不可用. ---------------------------------------------------------- ...