最近写了一个项目，写页面的结构，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. An Example of Pre-Query and Post-Query Triggers in Oracle Forms With Using Display_Item to Highlight Dynamically

    Example is given for Pre-Query and Post-Query triggers in Oracle Forms, with using Display_Itembuilt ...

  2. ARM家族大检阅

    首先列举下几个名称: 6410 2440 210 A8 ARM9 ARM11 ARMv7 ARMv6 进行分类: 1.芯片名称: 2440 6410 210 2.ARM核: A8 ARM9 ARM11 ...

  3. nslookup基础用法

    简单介绍 简单介绍如下: 实例:查询163.com域名信息 D:>nslookup Default Server: ns-px.online.sh.cn Address: 202.96.209. ...

  4. How much do we need to learn to be a Self-driving Car Engineer?

    Before everything we need programming skills in C++ and Python. One of the suggested book for C++ le ...

  5. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

  6. Java数组实现五子棋功能

    package ch4; import java.io.*; /** * Created by Jiqing on 2016/11/9. */ public class Gobang { // 定义棋 ...

  7. iOS开发之 几本书

    <object_c 编程之道书> <iOS 7 UI Transition Guide> iOS开发指南:从零基础到App Store上架[国内第一本iOS架构设计图书,涵盖i ...

  8. Linux用户查询

    用户列表文件:/etc/passwd 用户组列表文件:/etc/group 查看系统中有哪些用户:cut -d : -f 1 /etc/passwd 查看可以登录系统的用户:cat /etc/pass ...

  9. 转：strcmp函数实现及分析

    转自:strcmp函数实现及详解 strcmp函数是C/C++中基本的函数,它对两个字符串进行比较,然后返回比较结果,函数形式如下:int strcmp(constchar*str1,constcha ...

  10. scala调用java的方法,返回了一个对象链表List<Student>,在scala中遍历该链表获取指定Student的名字name

    假设Student类如下: class Student { private int no; private String name; public int getNo() { return no; } ...