CSS之div嵌套问题及高度自适应问题的五种实现--个人总结

2018-04-15 admin

以下是在自己实习生面试的时候遇到的一个问题,事后自己也去总结了一下。 问题描述如下: 一个外层div里面嵌套两个内部div,外层div高度固定(假设未知),内层上面的div高度固定,如何让下面的div实现撑满外层的div高度? 看到过网上有类似的问题,但是大部分都是假设外层高度为100%或者是已知的,而我遇到的是外层高度虽然固定,但是我们并不知道是多少(这里需要说明一下,代码中外层的高度我虽然自己给了固定值,但是只是为了效果,后面其实都没有用到这个值,基本就满足我们不知道外层的具体高度是多少这个条件了),所以也参看了网上的一些零散的解法,自己也都去实践了一下,最后总结出五种可以实现的方法。 HTML代码如下:

<div class="wrapper">
    <div class="div1">888888888</div>
    <div class="div2">12321423512</div>
</div>

五种实现方法如下: 1、使用flex布局实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto; /*这里的margin纯属为了测试时候的显示效果居中,无实际用途*/
    background: aquamarine;
    display: flex;
    flex-direction: column;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    order: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    order: 1;
    flex-grow: 1;
}

2、下面的div使用position:absolute + top/bottom实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    background-color: violet;
}

.div2 {
    background-color: teal;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
}

3、下面的div设置margin-top为负值实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    background-color: violet;
    position: relative;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
    margin-top: -100px;
    box-sizing: border-box;
    padding-top: 100px;
}

4、外层div设置padding-top,内层上面的div绝对定位实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    box-sizing: border-box;
    padding-top: 100px;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    position: absolute;
    top: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
}

5、上面的div绝对定位,top:0;下面的div设置box-sizing + padding-top

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    position: absolute;
    top: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 100px;
}

第一次写文章,有什么问题欢迎指出,大家有什么其他的实现方法也欢迎一起分享~~

相关文章
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
回到顶部