在面试中遇到的问题，做一个自适应的宽高2：1的矩形，这个问题考察了padding的细节，padding-bottom的百分比值，相对的是该盒模型的height,设置矩形之后，里面的内容如果太多会溢出，需要在父元素设置overfollow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Title</title>
    <style>
        #test {
            /*height为0，不要有多余的内容*/
            height: 0px;
            width: 100%;
            padding-bottom: 50%;
            background-color: #4cae4c;
            position: relative;
            overflow: hidden;
        }
        #test p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风死亡如风，常伴吾身死亡如风，常伴吾身死亡如风，常伴吾身死亡如风11111111</p>
    </div>
</body>
</html>

不可以使用padding-top，否则内容会被挤出来

关于自适应的矩形css布局的更多相关文章

  1. 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...

  2. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

  3. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  4. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  5. div+css布局自适应小结

    一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...

  6. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  7. CSS布局之-高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  8. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  9. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

随机推荐

  1. 数组名作为函数参数以及sizeof用法

    来源:https://blog.csdn.net/jay_zhouxl/article/details/51745518 int f(int *p,char *a) { printf("p[ ...

  2. 在pycharm中配置Anaconda以及pip源配置

    在学习推荐系统.机器学习.数据挖掘时,python是非常强大的工具,也有很多很强大的模块,但是模块的安装却是一件令人头疼的事情. 现在有个工具--anaconda,他已经帮我们集成好了很多工具了!an ...

  3. Qt之图形（简笔画-绘制漂亮的西瓜）

    简述 Summer is coming-我们呢,为大家准备了丰盛的佳果-西瓜,清爽解渴,甘味多汁. 一笔一划学简笔画,分分钟让你掌握一门新技能,下面我们来绘制一个"盛夏之王"-西瓜 ...

  4. iOS gzip解压

    1. 导入libz库(如:libz 1.2.5.dylib) 2. 引入头文件 #import "zlib.h" 3. 实现解压(输入输出都为NSData对象) -(NSData ...

  5. 足球大数据：致足球怀疑论者-The Counter(s)-Reformation反教条改革

    足球大数据:致足球怀疑论者-The Counter(s)-Reformation反教条改革 注:本序列文章都是本人对<The Numbers Game>书(豆瓣链接http://book. ...

  6. 【C++探索之旅】第二部分第一课：面向对象初探，string的惊天内幕

    内容简单介绍 1.第二部分第一课:面向对象初探.string的惊天内幕 2.第二部分第二课预告:掀起了"类"的盖头来(一) 面向对象初探,string的惊天内幕 上一课<[C ...

  7. vncserverpassword改动

    前几天去客户现场,客户说有測试库.Linux下的,帮忙给新建一个数据库,我这么热心的人.是吧 那就開始吧. 一般使用vnc搞图形安装.熟练的打开vnc.输入password,报错!!我愣了几秒,忽然反 ...

  8. POJ1338 &amp; POJ2545 &amp; POJ2591 &amp; POJ2247 找给定规律的数

    POJ1338 2545 2591 2247都是一个类型的题目,所以放到一起来总结 POJ1338:Ugly Numbers Time Limit: 1000MS   Memory Limit: 10 ...

  9. bzoj3158&3275: 千钧一发（最小割）

    3158: 千钧一发 题目:传送门 题解: 这是一道很好的题啊...极力推荐 细看题目:要求一个最大价值,那么我们可以转换成求损失的价值最小 那很明显就是最小割的经典题目啊?! 但是这里两个子集的分化 ...

  10. m_Orchestrate learning system---二十五、复制类的时候最容易出现的错误是什么

    m_Orchestrate learning system---二十五.复制类的时候最容易出现的错误是什么 一.总结 一句话总结:命名空间错误导致Analyze类虽然继承了Base类,但是没有执行里面 ...