最近写了一个项目，写页面的结构，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. EntityFramework 开始小试

    1 Install-Package EntityFramework 2 创建实体类 public class Blog { public int BlogId { get; set; } public ...

  2. 读Effective Java笔记之one：static Factory methods instead of Constructors （静态工厂方与构造器）

    获取类的实例的方法有很多种,在这很多种方法中,它们各有优缺,各有特点.这里,只介绍2中方法 1.使用构造方法 public class Person { private String sex; /** ...

  3. Codeforces Round #378 (Div. 2) C. Epidemic in Monstropolis 模拟

    C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. IBM Lotus Domino V8.5 服务器管理入门手册

    转自 http://freemanluo.blog.51cto.com/636588/336128

  5. iOS - OC NSPoint 位置

    前言 结构体,这个结构体用来表示事物的一个坐标点. typedef CGPoint NSPoint; struct CGPoint { CGFloat x; CGFloat y; }; typedef ...

  6. 用Jquery获取select的value和text值

    $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$(&q ...

  7. ajax跨域jsonp

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  8. gO语言的安装和环境变量的配置

    一.Go语言下载 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载,本人下载的是windows版本.也可以下载Source自己更深层次研究go语言. 二.G ...

  9. nginx系统真正有效的图片防盗链完整设置详解

    原文:http://www.wufangbo.com/nginx-fang-dao-lian/ 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链并不是真正的 ...

  10. 怎样使用ServletContextListener接口

    ServletContext : 每一个web应用都有一个 ServletContext与之相关联. ServletContext对象在应用启动的被创建,在应用关闭的时候被销毁. ServletCon ...