div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)
<style type="text/css" media="screen">
<!--
#main {width:500px;_height:300px;min-height:300px; background:#aaffaa; border:1px solid #600; float:left;overflow:hidden;_overflow:visible;}
#sidebar {width:200px;background-color:#ff0000; float:left; border:1px solid #060; }
#content {width:200px; background:#0000ff; border:1px solid #006; float:left;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
-->
</style>
</head>
<body>
<div id="main">
<div id="sidebar" class="row">
<p>Layer - left</p>
</div>
<div id="content" class="row">
Layer - right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
</div>
</div>
</body>
div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)的更多相关文章
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- CSS实现两列布局,一列固定宽度,一列宽度自适应方法
不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...
- 纯css实现两列等高
<!doctype html> <html> <head> <meta /> <title>Title</title> < ...
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
- div CSS样式——两张图片的位置关系
以上是实现将logo图片按照相对位置覆盖在另一张图片上的代码. 通过学习,我学到了以下方法: 将第二张图片定位到第一张图片上. 下面是简单的实现:(假设图都是100*100的) <style&g ...
随机推荐
- chm下载地址收集
Js_chm http://jjidc.jb51.net:81/201007/books/W3C_javascript.rar jQuery_1.7_chm http://jjidc.jb5 ...
- MongoDB 可视化管理工具 MongoCola-1.1.0 测试版发布
首先,感谢大家对于本工具的支持. 经过一周的努力,最新版的工具测试版出炉了,这个版本是一个很重要的版本. 为什么说这个版本重要?以前的工具,只支持一个视图窗口,也就是说了,一次只能看一个数据集的数据. ...
- fastclick插件 导致 日期插件无法触发
fastclick源文件中有这一行,加个if条件就可以了 当touchend的时候我们判断一下他的event.target到底是啥,如果是date我们就不玩了,不要你fastclick了,用原生的去触 ...
- LeetCode OJ:Product of Array Except Self(除己之外的元素乘积)
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- 什么是Activity,详细介绍Activity
首先,Activity是Android系统中的四大组件之一,可以用于显示View.Activity是一个与用记交互的系统模块,几乎所有的Activity都是和用户进行交互的,但是如果这样就能说Acti ...
- mcake活动维护,检查 ★ ★
一.检查火狐浏览器.chrome浏览器.ie8.9.10.11是否显示正常 二.对比设计稿 三.动画添加 四.检查图片是否失真 五.ie8空按钮无法点击 六.官网banner制作
- socket INADDR_ANY
linux下的socket INADDR_ANY表示的是一个服务器上所有的网卡(服务器可能不止一个网卡)多个本地ip地址都进行绑定端口号,进行侦听. 不光是多个网卡的问题. 见如下server lis ...
- jsp转发和重定向
response应答 a) Response.sendRedirect(路径); //重定向 b) Response.getRequestDispatcher(路径).forward(request, ...
- pip国内镜像(清华大学镜像)
网上搜到的pip国内镜像大部分是豆瓣的 http://pypi.douban.com/simple/ 但是根本不全,很多包没有 所以推荐清华大学的 https://pypi.tuna.tsinghua ...
- ng 自定义过滤器的创建和使用
过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...