在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ min-height和height的疑問？

min-height和height的疑問？

div1的高度為什么設(shè)置min-height后sp1和sp2的高度沒有撐起了呢？為什么把div1的min-height改成height后sp1和sp2就撐起來了？min-height不能替代height使用嗎？
圖片描述
圖片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #div1{width: 100%;min-height: 50px;background-color: yellow;}
    #sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}
    #sp2{width: 50%;height: 100%;display: inline-block;background-color: red;}
    </style>
</head>
<body>
<div id="div1">
    <span id="sp1">aaa</span>
    <spanv id="sp2">bbb</span>
</div>
</body>
</html>
回答
編輯回答
舊顏

mark下，也有此疑問

2018年4月5日 08:10
編輯回答
朽鹿

min-height就是你設(shè)置的這個元素的最小高度，因為在瀏覽器里容器的大小可能會被其中的內(nèi)容撐大，設(shè)置這個屬性后就能保證你的布局正確，因為它最小不會小于你設(shè)的那個值

2018年5月24日 17:01
編輯回答
寫榮

min-height表示盒子的最小高度，并不表示盒子的最終高度，站在外部盒子的角度理解是外部最終高度是由盒子的內(nèi)部元素的高度與當前盒子的最小高度共同決定。
在外部盒子等待內(nèi)部元素計算出高度時并不知道自己的高度，內(nèi)部盒子高度相對外部盒子設(shè)置高度時也未知外部高度，所以按照自己的內(nèi)容的情況渲染了，最終的效果就是內(nèi)部盒子高度與外部無關(guān)。

2017年9月5日 17:31
編輯回答
司令

可能有以下幾點問題
1 你用的IE,我記得IE8還是6 不支持min-height
2 min-heihgt是否設(shè)置成百分比了？ 如果設(shè)置百分比給父級元素一個高度

2018年8月20日 23:34
編輯回答
尋仙

恭喜你找到一個遠古的bug
https://bugs.webkit.org/show_...
https://stackoverflow.com/que...
至今未被修復(fù)

2017年7月2日 21:10
編輯回答
陪我終

父元素設(shè)置了 min-height但沒有設(shè)置 height時候，子元素的height 和 min-height 不會生效
子元素的 height 或是 min-height 是否生效，基于父元素是否設(shè)置了固定高度或者是一個有效百分比高度

參考：
height與min-height的百分比問題和鋪滿屏幕的布局方法
Child inside parent with min-height: 100% not inheriting height

2017年2月12日 01:34