CSS 左边div固定,右边div自适应
2024-08-26 19:49:03
有时候我们会有这样的需求,如图,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>
最新文章
- JVM 1.6 GC
- 水的demo
- C#中DateTime.Now.ToString()
- 关于angularjS与jQuery框架的那些事
- 【leetcode】Repeated DNA Sequences(middle)★
- 随笔3- list array
- 如何在windows7上安装启明星系统。
- html-图片button,抓包---Shinepans
- SQL Server Compact免安装部署
- Swift基础学习
- [pip]upgrade outdated pip package on windows / 在windows上更新所有过时的pip包
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
- 更强大的python正则表达式模块 -- regex
- TS的一些小东西
- 关于 RESTFUL API 安全认证方式的一些总结
- 如何传递参数给ASP.NET Core的中间件(Middleware)
- 学习Linux的正确姿势
- 两周撸一个掘金微信小程序
- 洛谷 P1291 [SHOI2002]百事世界杯之旅 解题报告
- socket连接和http连接的区别