网页html结构右侧栏固定，左侧自适应大小。
最近写了一个项目，写页面的结构，html树形结构是有header，container，footer部分，其中container部分是右侧栏是固定宽度，左侧是自适应宽度与屏幕高度。
第一次写的博客文章是container部分是左侧栏固定，右侧是自适应效果。左侧栏固定是很好写，但右侧栏固定却不很好写，以下是基本的结构与样式。
<div class="container" style="overflow:hidden;">
<div class="left leftCont">
</div>
<div class="right rightSide">
</div>
</div
1.左右栏高度一定， 如果仍想按照左侧固定的模式写右侧固定的效果。可以如下写：
可以看到container下的两个div进行了对调。
<style type="text/css">
.rightSide {
width: 200px;
height: 600px;
background: red;
float: right;
}
.leftCont {
width: 100%;
margin-right: 200px;
background-color: blue;
height: 600px;
}
</style>
</head>
<body>
<div class="container" style="overflow:hidden;">
<div class="rightSide">
</div>
<div class="leftCont">
</div>
</div>
</body>
2.如果不想将两个子div进行调换位置，则可以写如下代码，
<style type="text/css">
.rightSide {
width: 200px;
height: 600px;
background: red;
float: right;
} .leftCont {
float: left;
width: 100%;
margin-right: 200px;
background-color: blue;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
</head>
<body>
<div class="container" style="overflow:hidden;">
<div class="left leftCont">
</div>
<div class="right rightSide">
</div>
</div>
</body>
这样界面实现效果，并且左侧的高度大小跟右侧div的高度一样。 其中关键的两句话是：margin-buttom：-2000px; padding-buttom：2000px; 并且3000px不是固定的值，只要是比实际需求的高度大就ok。
网页html结构右侧栏固定，左侧自适应大小。的更多相关文章
- css float布局--右侧上部固定下部自适应大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- HTML布局之左右结构，左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应
该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...
- margin+absolute布局：右栏固定主内容自适应 demo
margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...
- NEC学习 ---- 布局 -三列，左侧自适应
效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...
随机推荐
- 一致性 hash 算法（ consistent hashing ）
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...
- 2013/7/17 HNU_训练赛5
sgu 542 Gena vs Petya sgu 543 Cafe 题意:有N组人需要被分配到某些固定了人数的桌子上,其中ai表示第i组有多少个人,安排作为需要符合如下安排:某一组的人员不能够单独在 ...
- jQuery.validate.js+API_cn
名称 返回类型 描述 validate(options) 返回:Validator 验证所选的FORM valid() 返回:Boolean 检查是否验证通过 rules() 返回:Options ...
- Windows_CMD_临时环境变量
1. 以 path 为例: 1.1.查看: set path 1.2.添加: set path=%path%;"要添加的路径" 附录:下面贴上一些常用的环境变量及作用 %ALLUS ...
- php使用cURL实现Get和Post请求的方法
1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...
- 在PC端或移动端应用中接入商业QQ的方法
今天看博友的博客学习了一种很有用的方法: 在页面中需要接入企业的QQ,访问网址:http://shang.qq.com/widget/consult.php.(就是API接口),然后你只需要登录你的Q ...
- mysql 求时间段平均值
考虑下面的需求,在一段时间内,间隔一段时间,取一个平均值,把所有的平均值取出来,怎么办?思路:在存储过程中,拼接sql语句.根据起始时间和结束时间,while循环每次加一段时间.DROP PROCED ...
- JavaWeb 5 Tomcat
5 Tomcat 1 Web开发入门 1.1 引入 之前的程序: java桌面程序,控制台控制,socket gui界面.javase规范 ...
- POJ 3468（树状数组的威力）
之前说过这是线段树的裸题,但是当看了http://kenby.iteye.com/blog/962159 这篇题解后我简直震惊了,竟然能如此巧妙地转化为用树状数组来处理,附上部分截图(最好还是进入原网 ...
- oracle中between
oracle中between and包含边界值,也就是所谓的闭区间. 如 between 1 and 100,则表示包含1和100及以内的一切数值. 如以下语句: 1 2 3 4 5 6 7 8 9 ...