CSS高度100％在自動兄弟股東不工作在Chrome

我有一個div與2 div裏面。第一個確定高度，第二個確定高度。但鉻不想這樣做。

<div style="display: table; height: 100%; width: 100%; min-height: 100%;"> 
    <div FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT></div> 

    <div style="box-sizing: border-box; display: table; float: right; 
    height: auto; min-height: 100%; padding: 0 20px 81px; position: relative; 
    width: 280px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; 
    -o-box-sizing: border-box;"></div> 
</div>

來源

2014-06-09 Lydia11

爲什麼不包括第一個div完整的CSS代碼呢？你也可以包含一個www.jsfiddle.net鏈接來幫助人們幫助你。 – Andrew

add display：table-cell for your inner div instead of display：table; –

'第一個DIV-高度變化的浮動左'不是一個有效的屬性。你可能想在此之前關閉div。此外，請避免使用內聯樣式..它使您的代碼難以閱讀並且難以使用...單獨的樣式表也可以避免重複。[爲什麼使用CSS]（https://developer.mozilla.org/zh-CN/） docs/Web/Guide/CSS/Getting_started/Why_use_CSS） –

Flexboxes是創建高度相等列的最簡單的方法：

<style> 
    .container { 
    display: flex; 
    display: -mx-flexbox; // IE10 
    display: -webkit-flex; // Safari 
    flex-grow: 0; 
    -ms-flex-grow: 0; // IE10 
    -webkit-flex-grow: 0; // Safari 
    } 
    .left, .right { width: 50%; } 
    .left { 
    background-color: #c66; 
    height: 200px; 
    } 
    .right { background-color: #66c; } 
</style> 


<div class="container"> 
    <div class="left"> 
    <p>This is the left DIV.</p> 
    </div> 
    <div class="right"> 
    <p>This is the right DIV.</p> 
    <p>Its height is equal to the left DIV.</p> 
    </div> 
</div>

Flexboxes不IE9和舊的工作。上述蘇雷什思想工作在老的瀏覽器，但有一個錯誤代碼（表細胞不浮動）和內嵌CSS被更好地避免：

<style> 
    .container { display: table; } 
    .row { display: table-row; } 
    .left, .right { 
    display: table-cell; 
    width: 50%; 
    } 
    .left { 
    background-color: #c66; 
    height: 200px; 
    } 
    .right { background-color: #66c; } 
</style> 


<div class="container"> 
    <div class="row"> 
    <div class="left"> 
     <p>This is the left DIV.</p> 
    </div> 
    <div class="right"> 
     <p>This is the right DIV.</p> 
     <p>Its height is equal to the left DIV.</p> 
    </div> 
    </div> 
</div>

來源

2014-06-09 08:27:13

添加display：table-cell屬性爲您的子div。這樣可以自動調整兄弟姐妹的高度。

<div style="display:table; width:100%; height:100%; border:1px solid #f000ff;"> 
    <div style="height:400px; display:table-cell; background-color:#ff000f;">My Main Content</div> 
    <div style="display:table-cell; float:right; height:100%; background-color:#ff00ff;">My Sample Content</div> 
</div>

檢查Working JSFIDDLE HERE

在上面擺弄我分配了第一個孩子的div高度400像素。如果修改此高度，右側div會自動調整其高度。檢查出來，讓我知道如果有任何問題。

來源

2014-06-09 07:37:55

只是一個快速點，如果桌子被設置爲高度100％，並且需要那個高度，那麼內部桌子單元格也會佔據這個高度，並忽略400px – Pete

非常感謝，這很好！ – Lydia11

CSS高度100％在自動兄弟股東不工作在Chrome

回答

相關問題