<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>左侧固定，右侧宽度100%自适应</title>

<style type="text/css" media="screen">

<!--

body {margin:0;padding:0;}

.right {margin-left:200px;}

.left {width:200px;position:absolute;top:0;left:0;}

p {border:solid #000 1px;padding:20px;}

-->

</style>

</head>

<body>

<div class="left">

<p>左侧宽度200px</p>

</div>

<div class="right">

<p>右侧宽度100%</p>

</div>

</body>

</html>

看了N篇文章，找了N中答案，什么clear啊，float啊，原来正道才是这么简单，而且100%兼容。Good！

对于右侧嵌入iframe， 则是<iframe width=" 100%"  height="100%" src="http://www.baidu.com"></iframe>  兼容ie6 ff等等

但不能使用css指定iframe的width height，否则存在浏览器兼容问题

div 两列布局，左侧固定宽度px，右侧自适应宽度，满屏的更多相关文章

  1. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...

  3. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. css左侧固定宽度，右侧自适应的几种实现方法

    左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...

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

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  6. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  7. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

随机推荐

  1. 阅读layim代码小记，实现可以更改用户签名的方法

    用layim原版的时候发现,用户的签名是不能直接修改的,如下: 其实要改也很简单,查看一下源代码,然后加一个input进去,可是,加完之后是这样的: 没关系,给它一个样式,让它乖乖的“隐藏“起来. / ...

  2. 初试体验java多线程

    现在个人电脑以及服务器都是多核cpu,如何提高多核cpu的利用率,就要用到多线程技术了. public class TestThread1 { ; static class PThread exten ...

  3. MySQL索引背后的数据结构及算法原理 --转

    写在前面的话 在编程领域有一句人尽皆知的法则“程序 = 数据结构 + 算法”,我个人是不太赞同这句话(因为我觉得程序不仅仅是数据结构加算法),但是在日常的学习和工作中我确认深深感受到数据结构和算法的重 ...

  4. android 各国语言对应的缩写

    android资源文件夹的写法规则: 语言缩写-国家地区缩写 语言缩写 藏语:bo_CN en 英文 en_US 英文 (美国) ar 阿拉伯文 ar_AE 阿拉伯文 (阿拉伯联合酋长国) ar_BH ...

  5. WCF学习心得----（五）生成客户端

    WCF学习心得----(五)生成客户端 1.    通过Svcutil.exe工具直接生成客户端 1.1     将服务承载于IIS上 1.1.1 在IIS中新建网站,所示效果如下图: 1.1.2   ...

  6. Call to undefined function bcscale()

    参考官方文档发现zabbix需要bcmath函数库的支持,其中bcscale()就是该函数库中的函数之一. 因此,现在只需要让php支持bcmath即可. yum -y install php-bcm ...

  7. 【jmete】Bean shell使用(一)

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...

  8. Neutron LBaaS Service（1）—— Neutron LBaaS Service基本知识

    在OpenStack Grizzly版本中,Quantum组件引入了一个新的网络服务:LoadBalancer(LBaaS),服务的架构遵从Service Insertion框架.LoadBalanc ...

  9. Python哈希函数hashlib

    hashlib常用加密方法:md5(), sha1(), sha224(), sha356(), sha384(), sha512()等 结果显示方法: digest():    返回二进制字符串 h ...

  10. C#读取系统信息

    using System; using System.Management; namespace Soyee.Comm { /// <summary> /// Computer Infor ...