CSS两列高度自适应，右边自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS两列高度自适应，右边自适应</title>
<style>
html,body{
width:100%;
height:100%;
}
body,div{
margin:0;
padding:0;
}
/* 这里之所以给margin-150px是为了减轻底部盒子的高度，不然盒子100%了 */
#box{
width:100%;
height:100%;
margin-top:-150px;
}
/* 浮动 */
#box .left{
float:left;
width:300px;
height:100%;
margin-right:10px;
background-color:red;
}
/* 利用前面的盒子浮动不占据位置，然后在通过overflow：hidden将两个盒子独立出来。 */
#box .right{
overflow:hidden;
height:100%;
background-color:pink;
}
#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:150px;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS两列高度自适应，右边自适应的更多相关文章
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- DIV+CSS左右列高度自适应问题
其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...
- JQuery 实现两列等高并自适应高度
想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS两列及三列自适应布局方法整理
布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- css两列自适应布局的多种实现方式及原理。
两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...
随机推荐
- ubuntu上搭建review board代码评审站点
Reviewboard是一个开源个人可以免费使用的代码评审框架,貌似现在有越来越多的公司也开始使用reviewboard作为公司的代码评审工具. 今天早上试了一下,搭建过程非常方便简单,按照网页提示即 ...
- 6.用CXF编写基于Spring的WebService
首先是服务器端: //实体类 public class Weather { private String region;//区域编码 private String regionName;//区域名称 ...
- IOS 计时器暂停和开始 防止重复点击
-(IBAction)btnClick{ [self starTimer];//开始计时 //[self stopTimer]; } -(NSTimer*)timer{ if (!_timer) { ...
- Android性能优化典范第一季
2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...
- entityframework使用oracle的几个小问题
问题一:Operation is not valid due to the current state of the object 生成的edmx文件有问题,解决方法参考链接 问题二:InvalidO ...
- NetMq学习--发布订阅（一）
基于NeqMq 4.0.0-rc5版本发布端: using (var publisher = new PublisherSocket()) { publisher.Bind("tcp://* ...
- 【转】Backbone标准例子——通讯录
参考:http://z2009zxiaolong.iteye.com/blog/1847833 感觉不错的例子,模型.视图.路由等知识点都用到了:),将此文中的源码转载如下: http://dmyz. ...
- WPF，Silverlight与XAML读书笔记第四十五 - 外观效果之模板
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...
- Entity Framework返回IEnumerable还是IQueryable?
在使用EF的过程中,我们常常使用repository模式,本文就在repository层的返回值是IEnumerable类型还是IQueryable进行探讨. 阅读目录: 一.什么是Repositor ...
- Guava - 并行编程Futures
Guava为Java并行编程Future提供了很多有用扩展,其主要接口为ListenableFuture,并借助于Futures静态扩展. 继承至Future的ListenableFuture,允许我 ...