身高：當父母div只有最大高度時，100％無法工作

無法將我的頭圍繞它！我試圖讓父div使用不超過80％的窗口高度max-height，而div div將所有父母高度減去一些東西。身高：當父母div只有最大高度時，100％無法工作

但是height財產在父母的百分比根本不工作的孩子，除非我給父母height財產。

這是爲什麼？

這是我的簡化小提琴：https://jsfiddle.net/mbatcer/m2ohnsf5/ 爲什麼內部div不尊重父母身高並走出容器？

HTML：

<div class="container"> 
    <div class="inner"> 
    <img src="http://via.placeholder.com/70x300"> 
    </div> 
</div>

CSS：

.container { 
    background: blue; 
    padding: 10px; 
    max-height: 100px; 
} 

.inner { 
    height: 100%; 
    width: 70px; 
    overflow: hidden; 
}

來源

2017-08-07 Mikhail Batcer

一個使用百分比設置高度的元素，也需要它的父元素有一個高度等等，一直到html/body，或者直到元素的高度不是使用百分比，而是max-身高「與此無關。另外，如果你在父級上使用百分比來設置高度，那麼你還需要將高度設置爲html/body，否則它將不起作用。爲什麼它是這樣的？ ... html，body和元素的高度默認爲auto，當在元素上使用百分比時，它會查詢父元素的高度，這將返回auto，因此它將以0結尾。 – LGSon

-1

添加height:80vh;到.container，它會工作。

來源

2017-08-07 17:10:39

我的第二句話問題是：「我試圖讓父母的窗戶高度不超過80％」。 –

請參閱編輯。將其更改爲「80vh」 –

-1

您應該將容器最大高度變成高度

.container {

背景：藍色; padding：10px; height：100px; }

然後添加

.inner img{

高度：100％ } `

來源

2017-08-07 17:22:33

如果設置孩子的max-height有一個百分比，它會在孩子的height根據家長的實際height，而不是設置的max-height。因此，您需要將高度設置爲.container，並將max-height: 100%設置爲您的圖像，因爲您的圖像比寬度高。

.container { 
    background: blue; 
    padding: 10px; 
    height: 100px; 
} 

.inner { 
    height: 100%; 
    overflow: hidden; 
} 

img { 
    max-height: 100%; 
}

一個更好的辦法來解決這個問題是使用flex-box。

.container { 
    display: flex; 
    flex-flow: row; 
    background: blue; 
    padding: 10px; 
    max-height: 80vh; 
} 

.inner { 
    overflow: hidden; 
} 

img { 
    max-height: 100%; 
}

來源

2017-08-07 17:24:30 brian17han

你應該改變你的CSS像這個 -

.container { 
    background: blue; 
    padding: 10px; 
} 

.inner { 
    max-height: 100px; 
    width: 100% ; 
    overflow: hidden; 
} 
.inner img { 
    max-height: 100px; 
}

來源

2017-08-07 17:29:39

我認爲這是你在找什麼：

.container { 
    background: blue; 
    padding: 10px; 
    max-height: 100px; 
    display: flex; 

} 

.inner { 
    width: 70px; 
    overflow: hidden; 
}

這裏是小提琴：https://jsfiddle.net/f9sfczya/1/

這裏我添加了顯示：flex;在你的父母的div和刪除的高度：100％; from child div。

不幸的是顯示：flex;不受IE9及更高版本的支持。

希望這可以幫助你。

來源

2017-08-07 17:42:41 Achyutam

身高：當父母div只有最大高度時，100％無法工作

回答

相關問題