如何讓內部的div至少匹配身體的高度？

這裏的是什麼，我想工作的罰款一個例子，如果股利是用最小高度機體的子元素：如何讓內部的div至少匹配身體的高度？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html,body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
.outer-wrap{ 
    min-height: 100%; 
} 
.table-layout{ 
    display: table; 
    min-height: 100%; 
    width: 100%; 
} 
.table-cell{ 
    display: table-cell; 
    width: 50%; 
    padding: 2%; 
} 
.blue{ 
    background: #55a; 
} 
.grey{ 
    background: #bbb; 
} 
</style> 
</head> 
<body> 
    <div class="outer-wrap"> 
    <div class="table-layout"> 
     <div class="table-cell blue"> 
     test 
     </div> 
     <div class="table-cell grey"> 
     content<br /> 
     <br /> 
     content<br /> 
     <br /> 
     content<br /> 
     <br /> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

https://codepen.io/anon/pen/OjxmGj

然而，當我添加的外層div與MIN-高度：100％;內格不再填充體的高度：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html,body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
.outer-wrap{ 
    min-height: 100%; 
} 
.table-layout{ 
    display: table; 
    min-height: 100%; 
    width: 100%; 
} 
.table-cell{ 
    display: table-cell; 
    width: 50%; 
    padding: 2%; 
} 
.blue{ 
    background: #55a; 
} 
.grey{ 
    background: #bbb; 
} 
</style> 
</head> 
<body> 
    <div class="table-layout"> 
     <div class="table-cell blue"> 
     test 
     </div> 
     <div class="table-cell grey"> 
     content<br /> 
     <br /> 
     content<br /> 
     <br /> 
     content<br /> 
     <br /> 
     </div> 
    </div> 
</body> 
</html>

https://codepen.io/anon/pen/JyrNVj

這不是一個真正實用的，我更新整個佈局得到這個工作，所以我希望有一種方法能使得這項工作沒有刪除外部股利。

來源

2017-08-14 user7862512

插入「高度： 100vh;」到內部分區。

有關更多詳細信息，請參閱此SO post on Viewport-Percentage。

使用檢查，這似乎產生了預期的結果。

來源

2017-08-14 12:40:09 JohnH

哇，這個作品完美，我從來沒有聽說過vh！非常有用，謝謝！ – user7862512

只需在類別outer-wrap中添加height: 1px並保留min-height: 100%。

html,body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
.outer-wrap{ 
 
    min-height: 100%; 
 
    height: 1px; 
 
} 
 
.table-layout{ 
 
    display: table; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 
.table-cell{ 
 
    display: table-cell; 
 
    width: 50%; 
 
    padding: 2%; 
 
} 
 
.blue{ 
 
    background: #55a; 
 
} 
 
.grey{ 
 
    background: #bbb; 
 
}

<div class="outer-wrap"> 
 
    <div class="table-layout"> 
 
    <div class="table-cell blue"> 
 
     test 
 
    </div> 
 
    <div class="table-cell grey"> 
 
     content<br /> 
 
     <br /> 
 
     content<br /> 
 
     <br /> 
 
     content<br /> 
 
     <br /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-14 12:26:23

這不起作用，因爲我希望外部div可以根據需要擴展到100％以上。 – user7862512

好的。嘗試使用'height：1px'來外包裹。檢查更新的答案。看看是否解決了這個問題。 –

您可以更改min-width到width兩個元素，並添加overflow-y: visible;允許它在必要時垂直延伸：

.outer-wrap { 
    height: 100%; 
    overflow-y: visible; 
} 
.table-layout { 
    display: table; 
    height: 100%; 
    overflow-y: visible; 
    width: 100%; 
}

https://codepen.io/anon/pen/dzVRvN

來源

2017-08-14 12:36:19 Johannes

如何讓內部的div至少匹配身體的高度？

回答

相關問題