CSS許多DIV具有100％的高度和寬度

Question

我有三個div。 但是，第三個div無法利用整個寬度100％和高度100％。 誰能告訴我為什么？ 在Codepen中，我已經強調了這些問題。 非常感謝。

http://codepen.io/anon/pen/VKyYRr

 /* Grid */ .row { border-bottom: solid 1px transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row > * { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row:after, .row:before { content: ''; display: block; clear: both; height: 0; } .row.uniform > * > :first-child { margin-top: 0; } .row.uniform > * > :last-child { margin-bottom: 0; } .row.\\30 \\25 > * { padding: 0 0 0 0px; } .row.\\30 \\25 { margin: 0 0 -1px 0px; } .row.uniform.\\30 \\25 > * { padding: 0px 0 0 0px; } .row.uniform.\\30 \\25 { margin: 0px 0 -1px 0px; } .row > * { padding: 0 0 0 40px; } .row { margin: 0 0 -1px -40px; } .row.uniform > * { padding: 40px 0 0 40px; } .row.uniform { margin: -40px 0 -1px -40px; } .row.\\32 00\\25 > * { padding: 0 0 0 80px; } .row.\\32 00\\25 { margin: 0 0 -1px -80px; } .row.uniform.\\32 00\\25 > * { padding: 80px 0 0 80px; } .row.uniform.\\32 00\\25 { margin: -80px 0 -1px -80px; } .row.\\31 50\\25 > * { padding: 0 0 0 60px; } .row.\\31 50\\25 { margin: 0 0 -1px -60px; } .row.uniform.\\31 50\\25 > * { padding: 60px 0 0 60px; } .row.uniform.\\31 50\\25 { margin: -60px 0 -1px -60px; } .row.\\35 0\\25 > * { padding: 0 0 0 20px; } .row.\\35 0\\25 { margin: 0 0 -1px -20px; } .row.uniform.\\35 0\\25 > * { padding: 20px 0 0 20px; } .row.uniform.\\35 0\\25 { margin: -20px 0 -1px -20px; } .row.\\32 5\\25 > * { padding: 0 0 0 10px; } .row.\\32 5\\25 { margin: 0 0 -1px -10px; } .row.uniform.\\32 5\\25 > * { padding: 10px 0 0 10px; } .row.uniform.\\32 5\\25 { margin: -10px 0 -1px -10px; } .\\31 2u, .\\31 2u\\24 { width: 100%; clear: none; margin-left: 0; } .\\31 1u, .\\31 1u\\24 { width: 91.6666666667%; clear: none; margin-left: 0; } .\\31 0u, .\\31 0u\\24 { width: 83.3333333333%; clear: none; margin-left: 0; } .\\39 u, .\\39 u\\24 { width: 75%; clear: none; margin-left: 0; } .\\38 u, .\\38 u\\24 { width: 66.6666666667%; clear: none; margin-left: 0; } .\\37 u, .\\37 u\\24 { width: 58.3333333333%; clear: none; margin-left: 0; } .\\36 u, .\\36 u\\24 { width: 50%; clear: none; margin-left: 0; } .\\35 u, .\\35 u\\24 { width: 41.6666666667%; clear: none; margin-left: 0; } .\\34 u, .\\34 u\\24 { width: 33.3333333333%; clear: none; margin-left: 0; } .\\33 u, .\\33 u\\24 { width: 25%; clear: none; margin-left: 0; } .\\32 u, .\\32 u\\24 { width: 20%; clear: none; margin-left: 0; } .\\31 u, .\\31 u\\24 { width: 14.28%; clear: none; margin-left: 0; } #row1 { border: 1px solid red; height: 50%; margin: auto; } #Word_wrapper { border: 1px solid blue; height: 100%; } .word_container { border: 1px solid blue; height: 100%; margin: auto; } 

 <div id="row1" class="row"> <div id="Word_wrapper" class="12u 12u(mobile)"> <div class="word_container"> <h1>Hello</h1> </div> </div> </div> 

Answer 1

您有以下規則：

.row > * {
    padding: 0 0 0 40px;
}

這意味着.row每個直接.row都有正確的填充。 只需將填充設置為零即可：

#Word_wrapper {
    padding: 0;
}

您將擁有整個寬度。 要獲得高度，您只需在示例中將100%應用於body和html 。 否則，身體將僅與您的內容一樣高。

 /* Grid */ .row { border-bottom: solid 1px transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row > * { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row:after, .row:before { content: ''; display: block; clear: both; height: 0; } .row.uniform > * > :first-child { margin-top: 0; } .row.uniform > * > :last-child { margin-bottom: 0; } .row.\\30 \\25 > * { padding: 0 0 0 0px; } .row.\\30 \\25 { margin: 0 0 -1px 0px; } .row.uniform.\\30 \\25 > * { padding: 0px 0 0 0px; } .row.uniform.\\30 \\25 { margin: 0px 0 -1px 0px; } .row > * { padding: 0 0 0 40px; } .row { margin: 0 0 -1px -40px; } .row.uniform > * { padding: 40px 0 0 40px; } .row.uniform { margin: -40px 0 -1px -40px; } .row.\\32 00\\25 > * { padding: 0 0 0 80px; } .row.\\32 00\\25 { margin: 0 0 -1px -80px; } .row.uniform.\\32 00\\25 > * { padding: 80px 0 0 80px; } .row.uniform.\\32 00\\25 { margin: -80px 0 -1px -80px; } .row.\\31 50\\25 > * { padding: 0 0 0 60px; } .row.\\31 50\\25 { margin: 0 0 -1px -60px; } .row.uniform.\\31 50\\25 > * { padding: 60px 0 0 60px; } .row.uniform.\\31 50\\25 { margin: -60px 0 -1px -60px; } .row.\\35 0\\25 > * { padding: 0 0 0 20px; } .row.\\35 0\\25 { margin: 0 0 -1px -20px; } .row.uniform.\\35 0\\25 > * { padding: 20px 0 0 20px; } .row.uniform.\\35 0\\25 { margin: -20px 0 -1px -20px; } .row.\\32 5\\25 > * { padding: 0 0 0 10px; } .row.\\32 5\\25 { margin: 0 0 -1px -10px; } .row.uniform.\\32 5\\25 > * { padding: 10px 0 0 10px; } .row.uniform.\\32 5\\25 { margin: -10px 0 -1px -10px; } .\\31 2u, .\\31 2u\\24 { width: 100%; clear: none; margin-left: 0; } .\\31 1u, .\\31 1u\\24 { width: 91.6666666667%; clear: none; margin-left: 0; } .\\31 0u, .\\31 0u\\24 { width: 83.3333333333%; clear: none; margin-left: 0; } .\\39 u, .\\39 u\\24 { width: 75%; clear: none; margin-left: 0; } .\\38 u, .\\38 u\\24 { width: 66.6666666667%; clear: none; margin-left: 0; } .\\37 u, .\\37 u\\24 { width: 58.3333333333%; clear: none; margin-left: 0; } .\\36 u, .\\36 u\\24 { width: 50%; clear: none; margin-left: 0; } .\\35 u, .\\35 u\\24 { width: 41.6666666667%; clear: none; margin-left: 0; } .\\34 u, .\\34 u\\24 { width: 33.3333333333%; clear: none; margin-left: 0; } .\\33 u, .\\33 u\\24 { width: 25%; clear: none; margin-left: 0; } .\\32 u, .\\32 u\\24 { width: 20%; clear: none; margin-left: 0; } .\\31 u, .\\31 u\\24 { width: 14.28%; clear: none; margin-left: 0; } html, body { height: 100%; } #row1 { border: 1px solid red; height: 50%; margin: auto; } #Word_wrapper { border: 1px solid blue; height: 100%; padding: 0; } .word_container { border: 1px solid blue; height: 100%; margin: auto; } 

 <div id="row1" class="row"> <div id="Word_wrapper" class="12u 12u(mobile)"> <div class="word_container"> <h1>Hello</h1> </div> </div> </div> 

Answer 2

要顯示div，您必須分配float: left和float: right;