問(wèn)題描述

現(xiàn)在有一個(gè)需求基本結(jié)構(gòu)

<p class='parent'> <p><table>....</table> </p> <p><textarea ></textarea> </p></p>

在parent里面又兩個(gè)p,左邊p中表格的高度根據(jù)tr的高度撐開(kāi)，tr的數(shù)量不定。右邊p中textarea的高度根據(jù)左邊p的自適應(yīng)。現(xiàn)在的css

.parent{ width:800px; }p p { background: #1296db; margin-bottom:-3000px; padding-bottom:3000px; display: inline-block; height: auto; width: 50%; vertical-align: top;} textarea{ height: 100%; width: 100%;}

現(xiàn)在雖然左右兩個(gè)p的高度看起來(lái)一樣，但是右邊textarea的高度并不充滿(mǎn)p的高度。請(qǐng)問(wèn)一下該如何實(shí)現(xiàn)這個(gè)布局

問(wèn)題解答

.parent{ display: flex; width:800px;}.parent p { width: 50%;}.parent textarea { box-sizing: border-box; height: 100%; width: 100%;}