html - css元素的高度怎么自动扩充到100%

Question

<p class="box">
    <p class="a"></p>
    <p class="b"></p>
</p>

box，a，b高度都根据内容增加，b的高度比a高，于是撑大box，这时a的高度怎么能和b或者box一样呢

Answer 1

雷雷 雷雷

Answer 2

100%是依父級高度定的

Answer 3

a,b是浮動的，要想讓a,b平行 ，是這個意思嗎

如果高度無法固定的話，可以用js動態設定a.style.height = b.style.height

Answer 4

http://jsbin.com/ruqebozetu/edit?html,css,output 你看看是否是你想要的效果.JQ做的.

Answer 5

彈性盒

Answer 6

html,body,box,a,b{
    height:100%
}

父元素設定高度100%

Answer 7

.box{
            width:500px;
            border:1px solid #ccc;
            position: relative;
        }
        .a{
            width:40%;
            height:100%;
            border:1px solid #f8d5d8;
            position: absolute;
            top:0;
            bottom:0;
        }
        .b{
            width:40%;
            min-height:300px;
            margin-left:41%;
            border: 1px solid #008080;
        }
        
    

• 優點:滿足你的題目要求

• 缺點：1.b的高度必須比a大，比較限制

• 如果CSS3的新功能支援較好，建議使用flex
  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Answer 8

我可以理解為css中的等高佈局的話，有那麼幾種方法: http://www.w3cplus.com/css/creaet-equal-height-columns