强迫症晚期患者：纯CSS实现div高度自适应浏览器。

我记得在学了网页自适应的内容后，每次写网页，力求宽高自适应。最后还是有一些困惑：写一个div给样式。（给定背景色和字体色是为了便于我们观察。）

width：100%;background：white；color：white；

状况： 如果我们不在div中书写内容，没有东西撑住div，div自适应该内容高度，div是不会显示的；还有，如果我们不给定div具体的高度值如100px,给100%高度，div也不会显示。

我想要的效果是： 给定div宽度100%，让div宽度自适应。高度也要自适应，但是在我不给定div具体高度值和不在该div中书写内容的前提下，它也要铺满整个浏览器。并且如果我们在里面书写内容，当内容的高度超过浏览器的高度的时候，它也自适应。

经过一番查阅和实践 我整理过来了两个纯CSS实现页面宽度，高度都自适应的方案

方案一：

<style>div {position: absolute;left: 0;top: 0;background-color: #000;width: 100%;height: 100%;}</style><div id="test"></div>

分析： 给div一个绝对定位，这样该div脱离文档流，此时它的宽高就不受任何元素的影响，这时给div的宽高都为100%，该div就铺满了整个浏览器。以此div为父级容器，在里面书写页面其他内容，宽高也自然是自适应浏览器的。但是此时我们的body是这样的，只有宽度没有高度，那还是因为我们的div脱离文档流了啊。

**方案二：**这时我们应该想到了，我们的body也是一个块元素，上面说没有内容撑div，其实是没有内容撑我们的body。

<style>html,body {height: 100%;margin: 0;}div {height: 100%;background-color: #ccc;}</style></head><body><div id="test"></div>

解析通过html,body{heightn:100%;margin: 0;}设置我们的body高度为100%，这时整个页面已经撑开，给定margin：0 是为了页面整体和浏览器无缝填充，这时也相当于给定整个页面的宽度为100%（黑色填满了页面作证了这一点）。那这会我们在给div一个100%的高度，div自然就实现了宽高的自适应。

强迫症晚期患者：纯CSS实现div高度自适应浏览器。相关推荐

css 控制div高度自适应浏览器的高度
css 控制div高度自适应浏览器的高度 1 <html> 2 <head> 3 <style> 4 #myTable{height:100%;border:sol ...
css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...
纯css实现iframe高度自适应
当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页,但是用iframe标签引入视频最大的一个问题就是无法自适应高度,宽度不是什么大问题,只有我们在iframe标签中加入width ...
如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...
div 自定义拉宽_纯Css实现Div高度根据自适应宽度（百分比）调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
css实现div高度自适应
1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...
DIV高度自适应浏览器高度方法
*{margin: 0;padding: 0; } html, body{width: 100%;height: 100%; } div{position: absolute;top: 0;left: ...

强迫症晚期患者：纯CSS实现div高度自适应浏览器。

强迫症晚期患者：纯CSS实现div高度自适应浏览器。相关推荐

最新文章

热门文章