Css实现左栏固定宽度，右栏自适应宽度实例

例

 代码如下 复制代码

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之绝对定位法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #nav{
                    top: 0;
                    left: 0;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    position: absolute;
            }
            #main{
                    height: 600px;
                    margin-left: 230px;
                    background: #0099ff;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
    </body>
    </html>

看起来很美好，但是。。

由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：

 代码如下 复制代码

 

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之绝对定位法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #nav{
                    top: 0;
                    left: 0;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    position: absolute;
            }
            #main{
                    height: 400px;
                    margin-left: 230px;
                    background: #0099ff;
            }
            #footer{
                    text-align: center;
                    background: #009000;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
            <div id="footer">
                    底栏
            </div>
    </body>
    </html>

我们再来看看第二种方法，左栏固定宽度，右栏自适应之负margin法：

 代码如下 复制代码

 

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之负margin法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #container{
                    margin-left: 230px;
                    _zoom: 1;
                    /*兼容IE6下左栏消失问题*/
            }
            #nav{
                    float: left;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    margin-left: -230px;
                    position: relative;
                    /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/
            }
            #main{
                    height: 600px;
                    background: #0099ff;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
    </body>
    </html>

这样无论两栏的高度如何变化都不会有问题了：

 代码如下 复制代码

 

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之负margin法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #container{
                    margin-left: 230px;
                    _zoom: 1;
                    /*兼容IE6下左栏消失问题*/
            }
            #nav{
                    float: left;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    margin-left: -230px;
                    position: relative;
                    /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/
            }
            #main{
                    height: 400px;
                    background: #0099ff;
            }
            #footer{
                    clear: both;
                    text-align: center;
                    background: #009000;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
            <div id="footer">
                    底栏
            </div>
    </body>
    </html>
时间： 2024-07-31 10:49:18

Css实现左栏固定宽度，右栏自适应宽度实例的相关文章

点击隐藏页面左栏或右栏实现js代码_javascript技巧

点击隐藏页面左栏或右栏(同一TABLE中) 复制代码 代码如下: <style type="text/css"> <!-- .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .STYLE1 {FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;} --> </style> <script&

div三栏布局，右侧自适应宽度代码示例

div三栏布局,右侧自适应宽度代码示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

css div自适应宽度实例

当内容超出父级元素宽度,在未设置white-space:nowrap时会自动换行,设置了white-space:nowrap样式又不能关联到滚动条延伸的部分,解决方案如下:       1.在父级元素添加white-space:nowrap属性:       2.计算(每一行)内容宽度:            a.将内容拆分,包括缩进.图片和文字.            b.利用<又谈换行情况处理>中在body末尾添加非换行dom元素计算文字宽度.            c.叠加拆分的小块宽度

左侧固定宽度，右侧自适应宽度的CSS布局_经验交流

左侧固定宽度200px 右侧宽度自动适应

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:   左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布

用CSS的float属性创建三栏布局网页的方法

  三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一种用CSS的float和clear属性来获得三栏布局的方法. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 基本方法 基本的布局包含五个div,即标题.页脚和三栏.标题和页脚占据

android开发中 PopupWindow 自适应宽度布局

PopupWindow用法 使用PopupWindow可实现弹出窗口效果,,其实和AlertDialog一样,也是一种对话框,两者也经常混用,但是也各有特点.下面就看看使用方法.首先初始化一个PopupWindow,指定窗口大小参数. PopupWindow mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.window, null),LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_C

固定右栏宽度, 左栏内容先出现同时自适应宽度的布局_经验交流

固定右栏宽度, 左栏内容先出现同时自适应宽度的布局 工作原理 #wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的,我直接用float的,可以用其他方式.其实如果只是要做到这个例子要的效果连#wrapper都可以不要. #left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处,再利用#innerLeft的margin:0 0 0 200px再把内容撑出来, #right只是简单的浮动,#innerRight米多大作用,只是习

div+css横向三栏布局自适应宽度示例

div+css横向三栏布局自适应宽度示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]