2017-07-19 88 views
0

enter image description here大家好我是反應新卡在一個問題上陣營內的div高度100%

問題: - 我的應用程序有很多的div像「根」,「組件」和組件UI DIV當我設置的我的組件的UI div div高度是嵌套div到100%,而不觸及上部div的css也沒有在所有上部div中添加100%高度而不是「body」我除了在這個組件中的UI(嵌套)div抓取高度全屏

希望球員你明白我的問題,請幫我發行

在這張照片_logincard不斂整他ight

+1

請提供一些代碼。 – vijayst

+0

@vijayst我更新了我的問題,其中有一張照片告訴我有關我的問題的所有信息 –

回答

0

這不是一個React問題。這就是css的工作原理。如果父容器沒有指定的高度,則不能使用%來計算子元素的尺寸。您將需要明確地將容器的高度設置爲正文元素。

1

這不是反應的問題,而是一個CSS的!這是它的工作原理!

當你說height:100%它使用父母身高計算!如果父母沒有特定的身高,瀏覽器無法確定孩子的身高百分比!

在解決方案,您可以使用CSS3是單位vuewport,vh

div{ height:100vh; } 

這會使你的div來進行屏幕的100%的高度,而不會改變任何父屬性!相對於屏幕高度,視口單位wirk,100vh =屏幕高度100%!

+0

好的但是如果我有一個div1,其高度是75vh,並且div1中還有另一個div2,而不是在div1> div2之後它可能就像這樣div1 > div ..> div2我需要div2 grabe所有高度從div1 –

+0

不可能與CSS,父母需要特定的高度或高度給予那個孩子div與所需的父母高度相同,即75vh!但是如果你改變了這個高度,你必須改變它們! (如果設計允許的話,你可以給兒童身高,即75vh,所有的包裝div的大小將按照小孩的尺寸增長) – demonofthemist

+0

//上部分 ._card { 寬度:65vh; 身高:75vh; 背景:橙色; position:absolute; left:17.5vh; top:12.5vh; } //嵌套div ._loginLeft { height:75vh; background-color:orange; } _loginLeft在卡內我不想要75vh在.loginleft它取決於upone上面的div高度你能建議我什麼,而不是75vh在.loginleft –