[CSS]使用绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化_Miss卿的博客

相关文章推荐

慈祥的消防车 · Web 开发框架，你用 ...· 6 月前 ·

气势凌人的可乐 · 本地部署GPT-2.0模型的具体流程_gpt ...· 6 月前 ·

威武的小马驹 · （2）RapidJson的详解及使用 - ...· 6 月前 ·

强健的松鼠 · 上海交通大学中国法与社会研究院· 9 月前 ·

豪情万千的麻辣香锅 · Flask 实现 Rest API ...· 11 月前 ·

现象1：父容器存在min-height ，父容器高度使用来确定
缩放屏幕至div1的高度出现滚动条
正常浏览器下，div1，div2的高度都是400px（图1）
IE8中，div1是以min-height:400px显示的。div2 的高度等于屏幕的高度（图2）

现象2 修改div2的高度height为auto 时
div1仍然是以min-height来读取高度，div2 的高度为 0

        .div1{
            
            top:0;
            right:0;
            left:0;
            bottom:0;
            min-height:400px;
            background:red;
.div2{
            height:auto;
            background:green;
                    测试demo 源代码：                            html,        body{            height:100%;            padding:0;            margin:0;        }        .div1{            
				在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 
复制代码代码如下: <html xmlns=”http:
				基本知识点
本文依赖于一个基础却又容易混淆的css知识点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
哈，top/left以父元素的width为参照物还好理解，但top/bottom不是以height更符合我们的预期吗？有疑惑很简单，看官方解释：
				1、padding-bottom实现
这里方法非常巧妙，由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以这里我们设置容器宽度为父容器的50%；padding-bottom也为50%；就都是父容器宽度的50%；显示出来就是一个完美的正方形了。
<style type="text/css">
#container {
    width: 80%;
    height: 500px;
.box{
    width: 50%;
    height: 0;
				最近遇到这样一个需求，一个大的div高度不固定，里面有两个小的div，第一个div高度固定（比如为100px）,第二个div高度填满大div的剩余高度。实现也很简单，想到了好几种实现方式，记录一下。 
因为外面大的div高度不固定，我在这里就默认填满body。 
1、定位：外面大的div相对定位，第二个div绝对定位，设置top:100px。代码如下：outer设置overflow:hidden去
在使用iSroll v4插件时，无法滚动到底部，从源码得知最大滚动位置由maxScrollY决定。从源码摘录出计算maxScrollY的部分
that.wrapperH = that.wrapper.clientHeight || 1;
that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that...
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。
先说absolute和float的相似处：包裹性 和 
高度欺骗
所谓一图胜千