最近写了一个项目，写页面的结构，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. Codeforces Round #376 (Div. 2) F. Video Cards 数学，前缀和

    F. Video Cards time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. 用一张图片制作skybox图片 (如何制作360全景图、立方体)

    我转发的帖子在这里 http://dong2008hong.blog.163.com/blog/static/4696882720140294039205/ 原帖不知道地址 我这里简单整理了下 去掉了 ...

  3. Perl 中 Pod 的基本用法。

    1. Pod 语法 pod中用段分可以分为三种,普通段落,字面段落(Verbatim Paragraph)和命令段落.三者的区分非常简单,以=pod|head1|cut|over等指示字开始的段落为命 ...

  4. iOS - OC NSTimer 定时器

    前言 @interface NSTimer : NSObject 作用 在指定的时间执行指定的任务. 每隔一段时间执行指定的任务. 1.定时器的创建 当定时器创建完(不用 scheduled 的,添加 ...

  5. iOS 推送证书生成pem

    cert: openssl x509 -in aps_development\ \(8\).cer -inform der -out pushDeveCerTopem.pem key: openssl ...

  6. poj2002Squares(点集组成正方形数）

    链接 可以枚举两个点,因为是正方形两外两点可以由已知求出,据说可以根据三角形全等求出下列式子,数学渣不会证... 已知: (x1,y1)  (x2,y2) 则:   x3=x1+(y1-y2)   y ...

  7. Python学习笔记12—类

    典型的类和调用方法: #!/usr/bin/env Python # coding=utf-8 __metaclass__ = type #新式类 class Person: #创建类 def __i ...

  8. python的最最最最最基本语法（3）

    模块:在Python中,一个.py文件就称之为一个模块(Module). 为了避免模块名冲突,Python又引入了按目录来组织模块的方法,称为包(Package).例如两个名不hello.py的模块分 ...

  9. Android APK混淆

    APK混淆 1 修改project.properties文件 即可实现对项目进行全局混码将proguard.config=${sdk.dir}/tools/proguard/proguard-andr ...

  10. iOS 开发之 Xcode6 创建真机调试证书

    http://jingyan.baidu.com/article/ff411625b8141312e48237a7.html 1.登录苹果开发者中心 2.登录后的界面如图所示,如果没有最上面的两个选项 ...