我如何確保沒有內容的div將獲得父div的高度？

我想創建到divs寬度的外部容器設置爲1000px和內部左右容器各爲50%。現在我已經使用這個代碼我如何確保沒有內容的div將獲得父div的高度？

.leftNav { 
    @include span-columns(5 of 10); 
    background-color:silver; 
    color:white; 
} 

.rightNav { 
    @include span-columns(5 of 10); 
    background-color:silver; 
    color:white; 
}

現在不知何故，如果我不把左nav右nav充分寬度爲100％什麼。 如何將leftnav或rightnav設置爲至少保持50％的寬度（即使它們是空的）？謝謝。

來源

2014-10-07 designerNProgrammer

這個「問題」不是來自整潔，而是來自CSS本身。要顯示，空元素需要有一個height.You可以用下列技巧之一：

將 在你的DIV
您的div設置一個height
上設置一個padding您DIV

這裏的另一個伎倆我想，如果你不使用這些div的，:after僞元素：

.leftNav:after, 
.rightNav:after { 
    content: '.'; // dot will force its parent to have a height 
    opacity: 0; // dot is hidden 
}

來源

2014-10-27 12:07:13 zessx

您可以使用css tables。

設置在左邊和右邊的div都display:table-cell將確保每一個得到高度相等

FIDDLE

.container { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.left { 
 
    width: 50%; 
 
    display: table-cell; 
 
    background: silver; 
 
} 
 
.right { 
 
    width: 50%; 
 
    display: table-cell; 
 
    background: tomato; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="right">some text</div> 
 
</div>

（的兩個越大，即高度）

來源

2014-10-27 12:29:22 Danield

我如何確保沒有內容的div將獲得父div的高度？

回答

相關問題