CSS 左边div固定,右边div自适应
有时候我们会有这样的需求,如图,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自适应的更多相关文章
- HTML左边盒子固定,右边盒子自适应
html: <div class="box1"> <div class="divA">DIVA</div> <div ...
- css-两个div并排,左边宽度固定右边自适应的布局 的实现方法
<div class= "container"> <div class="left"></div> <div clas ...
- flex 上下div固定, 中间div自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- 【HTML+CSS】右侧固定,左侧自适应布局
<style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ m ...
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现左边div固定宽度,右边div自适应撑满剩下的宽度
(1)使用float <div class="use-float"> <div></div> <div></div> & ...
- 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
随机推荐
- FindBugs——帮助查找隐藏的bug
FindBugs 1.什么是FindBugs FindBugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.有了静态分析工具,就可以在不实际运行程序 ...
- genymotion——在虚拟机中当中安装genymotion,启动已经新增好的设备时,提示:the virtual device got no ip address
1.启动已经新增好的设备时,提示:the virtual device got no ip address,于是在网上搜索该问题,便得到提示,先启动virtual box中的该模拟设备,于是便启动,出 ...
- windows平台mongoDB安装配置
一.首先安装mongodb 1.官网下载mongoDB:http://www.mongodb.org/downloads,选择windows平台.安装时,一路next就可以了.我安装在了F:\mong ...
- [golang note] 数组切片
数组 √ golang数组包含的每个数据称为数组元素(element),数组包含的元素个数被称为数组长度(length). √ golang数组的长度在定义后不可更改,并且在声明时可以是一个常量或常量 ...
- Xcode控制台命令
命令 解释 break NUM 在指定的行上设置断点 bt 显示所有的调用栈帧,该命令可用来显示函数的调用顺序 clear 删除设置在特定源文件.特定行上的断点,其用法为:clear FILENAME ...
- django 【认证】
一.验证 1.views.py from django.contrib.auth.decorators import login_required from django.contrib.auth i ...
- hash值是啥,单页面应用的实质
1.什么hash Location hash属性,http://www.runoob.com/jsref/prop-loc-hash.html,hash 属性是一个可读可写的字符串,该字符串是 URL ...
- 2017浙江省赛 C - What Kind of Friends Are You? ZOJ - 3960
地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3960 题目: Japari Park is a large zoo ...
- Vuejs开发环境搭建及热更新
一.安装NPM 1.1最新稳定版本: npm install vue 二.命令行工具安装 国内速度慢,使用淘宝镜像: npm install -g cnpm --registry=https://re ...
- 谷歌技术"三宝"之BigTable(转)
原文地址: http://blog.csdn.net/opennaive/article/details/7532589 2006年的OSDI有两篇google的论文,分别是BigTable和Ch ...