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 </ ...
随机推荐
- 001-shell基础,创建,运行
一.概述 Shell 是一个用 C 语言编写的程序.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服 ...
- 二进制x&(x-1);
求下面函数的返回值(微软) int func(x) { int countx = 0; while(x) { countx ++; x ...
- SpringBoot简介及第一个应用
一.Spring时代变换 1. Spring1.x 时代 Spring初代都是通过xml文件配置bean,随着项目的不断扩大,繁琐的xml配置,混乱的依赖关系,难用的bean装配方式,由此衍生了spr ...
- jsonp解决跨域问题
日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...
- mysql数据库优化的几种方法
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- iClap分享:如何优雅的在 APP 中实现测试?
开发团队常面临的问题有:内测 APP 时测出一堆 bug 写了很多文档,交到下一个人手中时问题总是不够清晰明了;版本发布公测时只能分发原生版本给团队和用户,无法快速反馈测试和体验结果;使用第三方工具, ...
- Codeforces Round #408 (Div. 2) D - Police Stations
地址:http://codeforces.com/contest/796/problem/D 题目: D. Police Stations time limit per test 2 seconds ...
- 零基础学习openstack【完整中级篇】及openstack资源汇总
1.你是如何学习openstack的?2.你对openstack的组件了解多少?3.你认为openstack该如何学习? 一直想写关于openstack的方面的内容,今天终于整理完成.算是完成一桩心事 ...
- java5引入的并发编程库
java5之后引入了java.util.concurrent包,专门用于解决java多线程问题. AtomicInteger用于解决原子性操作(i++,i--的问题): AtomicInteger ...
- 激活webstorm(作为一个伪前端,偶尔用用)
推荐博客:https://blog.csdn.net/voke_/article/details/76418116 我试的方法一.