keimon
keimon

div-css-两列高度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>
<style type="text/css">
/*
 外层一定要有overflow:hidden;
 左右两列，哪列短，其样式就需要加上margin-bottom:-9999px;padding-bottom:9999px;

 

给外层元素加上：position：relative；（在ie6,7,8中，当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。给父元素加上position：relative）
*/
.main{width:502px;overflow:hidden; border-bottom:1px solid #000; border-top:2px solid #000; position:relative;}
.left{width:100px;background-color:#0CC;float:left; border-left:1px solid #000;}
.right{width:400px;background-color:#F00;float:left;margin-bottom:-9999px;padding-bottom:9999px; border-right:1px solid #000}
</style>
</head>
<body>
<div class="main">
    <div class="left">左侧内容1<br />左侧内容2<br />左侧内容3左侧内容1<br />左侧内容2<br />左侧内容31</div>
    <div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>

你可能感兴趣的:(div-css)

  • 关于SEO优化 Lost_Youth
    什么是SEO？SEO的中文意思是搜索引擎优化。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排名提高，让搜索引擎给你带来客户。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。SEO常用方式采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层
  • div-css是世界上最垃圾的语言 废文鉴定师
    div+css布局是我见过的最繁杂，最困难，最恶心的布局方式。如果你学过android和ios布局的话，你就会明白我为什么这样说了，特别是ios的AutoLayout，直接甩css几万里。从原生布局转向h5布局，简直就是从天堂掉到粪坑。举个例子，实现一个不定高度的div在父div中垂直居中，这在android和ios原生布局中只需一行代码或一个约束即可实现，而使用css，你需要无数代码，并且实现方
  • 图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法) HNFXS985 网站
    你对DIVCSS布局中绝对定位和浮动的概念及使用是否熟悉，这里和大家分享一下，CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项中的绝对定位，第二种则是使用CSS中的浮动（float）概念。DIVCSS布局中绝对定位和浮动CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute、static、relative和fixed）中的绝对定位（absolut
  • 通过css将多个图标或图片用同一张图片通过定位背景位置调用到页面 weixin_30536513
    http://www.html-5.cn/div-css/jiaocheng/1692.html转载于:https://www.cnblogs.com/passer1991/archive/2013/01/27/2878369.html
  • CSS浮动(float,clear)通俗讲解 贝壳里的沙 HTMLCSS浮动floatclear通俗讲解
    Div-CSS浮动(float,clear)-position通俗讲解我作为一个研发人员，从事Java软件开发工作多年，大多都是做服务器端程序的开发，当然偶尔也会涉及到前端的工作，这不公司有一个项目即将上线，时间紧急，我们几个具备前端开发技术的Java开发人员临时被委以重任，协助前端开发人员解决多浏览器兼容的Bug等前端工作。由于大学和实习工作时深入研究和应用过基于Div-CSS-JS的网页设计技
  • iframe自适应高度，同时为src属性赋值 iframe
    问题的描述： 　　为了将一个html页面嵌入到另外一个html页面当中，用到iframe标签。 　　在iframe标签的onload事件中，根据传递的参数确定iframe的src属性链接哪一个具体的html页面。 　　遇到的问题是，当页面嵌入之后iframe高度不能随嵌入页面的高度变化，参考“平凡的世界”博客http://www.ccvita.com/category/div-css/的做法
  • IE6常见bug整理 ie6
    By Diaoyude  | 发布时间： 09-08 09:47  | Hits：1,253 | Post in： WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6fixed,ie6 a:hover span bug 今天goole下又发现了一个，整理备录下 1. 强制浏览器是用Web标准解析 HT
  • Firefox和IE通用的三则网站重构的技巧 firefox
     from:http://www.4studio.cn/a/div-css/201108048543.html   Firefox和IE通用的三则网站重构的技巧 使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题我们经常遇到一个容器外面套一个边框，边框高度随容器高度变化，但是当边框内容器设置了浮动属性后，外框就不跟随变化，这时就需要清除浮动。给外
  • 图片在容器里垂直居中 垂直居中
    在div-css布局运用中，如何让图片在容器里垂直居中是很多人询问的问题，这里收集了几个例子 第一个例子<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html x
  • 页面定时跳转(倒计时跳转)代码总结 倒计时
    （1）使用setTimeout函数实现定时跳转（如下代码要写在body区域内） <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.phpernote.com/div-css/354.html',3);
  • div+css实现仿猪八戒首页导航菜单效果 佚名
    本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下：这是一款仿猪八戒2010年首页的网页导航菜单，蓝色风格，非常漂亮大气、简洁专业，在此推荐给大家。菜单上有一个标记，指引当前的位置，也是本菜单的亮点。用CSS究竟是如何实现的呢？那么就请一起看代码吧。先来看看运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/div-css
  • DIV-CSS布局笔记 ReusLi css
    插入-布局对象     DIV标签 margin  外边距 padding 内边距 float  向left or right对齐，记得加在 CSS{..float = "left"} 最后一行 <div id="1" style=&
  • Div-CSS浮动(float,clear)-positon通俗讲解 zolalad cssdivfloat
    Div-CSS浮动(float,clear)-position通俗讲解       我作为一个研发人员，从事Java软件开发工作多年，大多都是做服务器端程序的开发，当然偶尔也会涉及到前端的工作，这不公司有一个项目即将上线，时间紧急，我们几个具备前端开发技术的Java开发人员临时被委以重任，协助前端开发人员解决多浏览器兼容的Bug等前端工作。由于大学和实习工作时深入研究和应用过基于Div-CSS-J
  • DIV-CSS设计之命名规则 Imagination_Fly cssdiv
    CSS页面的各DIV CLASS命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:ti
  • DIV-CSS学习笔记 hangzhou 框架cssXHTML搜索引擎Dreamweaver
    1.声明文档类型：XHTML1.0提供了三种DTD声明可供选择：a.  过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：b.  严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下： c.  框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页
  • 转 document.body和document.documentElement,document.compatMode的关系 lich0079 Webcss浏览器IEfirefox
    转自 http://www.seobye.com/div-css/90   对于document.compatMode ，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们 开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Qu
  • 转 document.body和document.documentElement,document.compatMode的关系 lich0079 Webcss浏览器IEfirefox
    转自 http://www.seobye.com/div-css/90   对于document.compatMode ，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们 开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Qu
  • 转 document.body和document.documentElement,document.compatMode的关系 lich0079 Webcss浏览器IEfirefox
    转自 http://www.seobye.com/div-css/90   对于document.compatMode ，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们 开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Qu
  • 转 document.body和document.documentElement,document.compatMode的关系 lich0079 Web浏览器cssIEfirefox
    转自 http://www.seobye.com/div-css/90   对于document.compatMode ，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们 开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Qu
  • W3C document.body document.documentElement dingjun1 html浏览器cssXHTML脚本
    转载：http://www.seobye.com/div-css/87  http://www.seobye.com/div-css/90 下面的内容没有完整转载，如果要查看完整内容请去原网站。 1、若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
  • 有用的网站 ljtat jspPHP浏览器SVNcss
    遇到了就在此添加，大家一起学习！ 1 svn：   http://www.svn8.com/ 2.php   http://www.php100.com 3.网站模版 http://www.web600.net/Index.html http://www.zhong-jin.com/ http://bestmoban.com/div-css/ http:/
  • jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
    XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
  • mysql 分区查询优化 annan211 java分区优化mysql
    分区查询优化 引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。 所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。 可以通过查看explain执行计划，是否携带 partitions
  • MYSQL存储过程中使用游标 chicony Mysql存储过程
    DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
  • mysql 和 sqlite 区别 Array_06 sqlite
    转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
  • pinyin4j使用 oloz pinyin4j
    首先需要pinyin4j的jar包支持；jar包已上传至附件内 方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
  • 微博发送私信 随意而生 微博
    在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据， 让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
  • jsp 香水浓 jsp
    JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后
  • 在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
    在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号   最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx   现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
  • android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
    我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去 1 2 3
  • jdk-6u26-linux-x64.bin 安装 baalwolf linux
    1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
  • MongoDB经典面试题集锦 BigBird2012 mongodb
    1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。 关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 在考虑数据库的成熟
  • JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScriptPromise
            Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。         在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
  • [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
    ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
  • 【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
    隐式转换存在的必要性，   在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下：   val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
  • Android JSON数据的解析与封装小Demo ronin47
    转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor
  • [设计]字体创意设计方法谈 brotherlamp UIui自学ui视频ui教程ui资料
      从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
  • 单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java算法面试题
    import java.util.LinkedList; /* 单调队列 滑动窗口 单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减 题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
  • struts2处理一个form多个submit chiangfai struts2
    web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
  • shell查找上个月，陷阱及野路子 chenchao051 shell
    date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号
  • mysql导出数据中文乱码问题 daizj mysql中文乱码导数据
    解决mysql导入导出数据乱码问题方法： １、进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
  • SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHPsmartysae
      对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为：   01 $path 
  • 《教父》系列台词 dcj3sjt126com
    Your love is also your weak point. 你的所爱同时也是你的弱点。   If anything in this life is certain, if history has taught us anything, it is that you can kill anyone.   不顾家的人永远不可能成为一个真正的男人。 &
  • mongodb安装与使用 dyy_gusi mongo
    一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun
  • Git排除目录 geeksun git
    在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。   有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1.  针对单一工程排除文件 这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
  • Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
    转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。   2) 设置脚本文件的权限 $ sudo chmod 755
  • 第八章 流量复制/AB测试/协程 jinnianshilongnian nginxluacoroutine
    流量复制 在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
  • 电商系统商品表设计 lkl
    DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
  • 修改phpMyAdmin导入SQL文件的大小限制 pda158 sqlmysql
    　用phpMyAdmin导入mysql数据库时，我的10M的 数据库不能导入，提示mysql数据库最大只能导入2M。 　　 phpMyAdmin数据库导入出错： 　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
  • Tomcat性能调优方案 Sobfist apachejvmtomcat应用服务器
    一、操作系统调优 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 【适用场景】 任何项目。 二、Java虚拟机调优 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
  • SQLServer学习笔记 vipbooks 数据结构xml
    1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他