最近写了一个项目，写页面的结构，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结构右侧栏固定，左侧自适应大小。的更多相关文章

  1. css float布局--右侧上部固定下部自适应大小

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  3. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  4. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  5. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  6. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  7. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  8. margin+absolute布局：右栏固定主内容自适应 demo

    margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...

  9. NEC学习 ---- 布局 -三列，左侧自适应

    效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...

随机推荐

  1. iOS开发学习笔记:基础篇

    iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...

  2. Linux运行变量中的命名脚本

    single="ls -l" $single ============= multi="ls -l | grep e" echo $multi > tmp ...

  3. django 简单的邮件系统

    django邮件系统 Django发送邮件官方中文文档 总结如下: 1.首先这份文档看三两遍是不行的,很多东西再看一遍就通顺了. 2.send_mail().send_mass_mail()都是对Em ...

  4. [POJ1222]EXTENDED LIGHTS OUT（高斯消元，异或方程组）

    题目链接:http://poj.org/problem?id=1222 题意:开关是四连通的,每按一个就会翻转自己以及附近的四个格(假如有).问需要翻转几个,使他们都变成关. 把每一个灯看作一个未知量 ...

  5. freebsd镜像作用和vmware服务开启

    第一个是可以引导的光盘,只能引导系统,通常用于网络安装.基本没用.第二个是系统光盘的第一张.用这张就可以安装一个基本的系统.其他的软件,在系统安装完之后安装.第三个是系统盘的DVD版本.包括的软件比上 ...

  6. hdu 4828 Grids 卡特兰数+逆元

    Grids Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Problem D ...

  7. RedHat安装DB2详细步骤(附卸载、备份恢复步骤)

    1.创建用户组和用户 说明: 步骤1 以root用户登录需要安装DB2的服务器. 步骤2 创建用户组和用户. # su -root # groupdel db2grp # groupdel db2fg ...

  8. DB层面上的设计 分库分表 读写分离 集群化 负载均衡

    第1章  引言 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的 互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的 ...

  9. 如何将自己开发的标签打成jar包

    1: 在Myeclipse中新建一个java工程 2: 将你的标签处理器类统统都拷到工程里面, 将tld文件拷到META-INF里面 3:点击file里面的export,

  10. Android版本升级同时Sqlite数据库的升级及之前数据的保留

    http://www.cnblogs.com/wang340/archive/2013/05/06/3063135.html http://www.eoeandroid.com/forum.php?m ...