css, 通过绝对定位来实现 元素的自适应

说起来 确实惭愧呢  好歹也是工作了 一段时间了   但是 却从来没有用过 这种 方式

不是说不用  是因为 不知道  尴尬哈 

直到最近要做一个   能全屏的 功能的时候      子元素 要随着 父元素的变大  而变大    其实宽度设置百分比 倒是可以    实现

但问题就出现在了 高度上面    其实通过 js 来控制高度 来可以  但那个有点麻烦   本心上也不想采用 那种方式

然后同事就给出来 一种通过绝对定位来实现哈

代码示例      就是通过  四个方向的 定位  然后 实现 元素的   上下左右  距离    然后子元素 就被撑起来了

position: absolute;
            right: 50px;
            top: 20px;
            left: 60px;
            bottom: 30px;

<style type="text/css">
		.parent {
			position: relative;
			margin: 0 auto;
			width: 40%;
			height: 500px;
			border: 1px solid #f00;
		}
		.child {
			position: absolute;
			right: 50px;
			top: 20px;
			left: 60px;
			bottom: 30px;
			border: 1px solid #aaf;
		}
	</style>
<div class="parent">
	<div class="child"></div>
</div>

就实现上面的效果了  下面 我们看看动态的 效果    是不是只用 动外层的父元素  宽高     里面的子元素 自动跟着就发生了变化

本来项目中 右侧还有一个侧边栏    我想用  calc(父元素 -   侧边栏的宽度)    但是吧  考虑calc的兼容性 问题    还是  弃用了  

定位来实现的效果还是挺好的

关注我 持续更新 前端知识