css 左右布局高度自适应,CSS布局-高度自适应

前面一篇讲述了有关高度自适应的问题，现在来讨论下用CSS2来实现高度自适应的方式。

单个自适应

当且只有个一个div的高度需要自适应时，我们可以使用以下方法，*{padding:0;margin:0;}

.title{height:100px;background-color:red;}

.content{position:absolute;top:100px;bottom:0px;left:0px;right:0px;background-color:olive;}

我们调整浏览器窗口的大小，第二个div可以达到自适应的效果。当然，这种方式只可以兼容IE7+以上的浏览器。

多个自适应

我们可以采取高度百分比的方式来实现。注：设置元素height百分比式，必须设置其所有父级的height。*{padding:0;margin:0;}

body,html{height:100%;} /* 这个设置是必须的 */

.first{height:20%;background-color:red;}

.last{height:80%;background-color:olive;}

更改窗口大小，上下两个div的高度遵循20:80的关系，也就是1:4的关系，调整height比例，就可以更改两者的相对高度。

当然，可以通过这两种方式的组合，来达到其他自适应的目的。

总结

以上是编程之家为你收集整理的CSS布局-高度自适应全部内容，希望文章能够帮你解决CSS布局-高度自适应所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

css 左右布局高度自适应,CSS布局-高度自适应相关推荐

css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
转: 自适应css布局—-流动布局新时代(译文)
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
自适应 CSS 栅格布局
自适应 CSS 栅格布局 CSS 栅格布局(Grid)是一种全新的在 Web 上创建二维布局的方法.我们仅需几行 CSS,就可以创建一个之前不用 JavaScript 根本不可能实现的栅格布局.我们不 ...
html字体变大自动换行,css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: 所在部门 @ViewBag.decideDetail.departName 岗位 @ViewBag.decideDetail.pos ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
css设置元素网页高度自适应,css高度自适应如何实现？css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...

css 左右布局高度自适应,CSS布局-高度自适应

css 左右布局高度自适应,CSS布局-高度自适应相关推荐

最新文章

热门文章