兩列的網頁，DIV溢出

我需要一些幫助，這是困擾我...兩列的網頁，DIV溢出

我有以下DIV結構：

<div id="principal"> 
    <div id="colIzquierda">Some Content</div> 
    <div id="colDerecha">Some Content</div> 
</div>

而下面的CSS代碼樣式吧：

body, html { 
    height:100%; 
    margin:0px; 
    padding:0px; } 

#principal { 
    width:1000px; 
    height:100%; 
    margin:0px auto; } 

#colIzquierda { 
    width:250px; 
    float:left; } 

#colDerecha { 
    width:750px; 
    float:right; }

我有一個問題，當我填寫例如#colDerecha有很多的內容，並且它溢出我的瀏覽器窗口的高度，那麼我可以看到這樣的事情：

Caption

其中暗灰色=＃主體，淺灰色=主體，綠色= #colDerecha。

當#colDerecha內容大於屏幕尺寸時，如何讓#principal始終獲得與#colDerecha相同的高度？

我不知道如果我解釋自己不夠...

請一些想法？我曾嘗試將高度：100％添加到#colIzquierda和#colDerecha，但沒有達到我想要的效果。它溢出相同，但以其他方式...

來源

2014-05-13 qalbiol

一種常見的方法是改變父元素的display，#principal，到table，然後設置子元素的display到table-cell。這樣做，#colIzquierda和#colDerecha將填充剩餘的空間。

Example Here

#principal { 
    width:100%; 
    height:100%; 
    background:gray; 
    display:table; 
} 
#colIzquierda { 
    width:25%; 
    display:table-cell; 
} 
#colDerecha { 
    width:75%; 
    display:table-cell; 
    background:gold; 
}

來源

2014-05-13 18:18:43

好吧，這個工作完美無瑕，完全符合我的需求！謝謝，這個代碼有什麼樣的瀏覽器兼容性問題？我認爲 qalbiol

@qalbiol支持可以看[這裏]（http://caniuse.com/css-table）。它將在IE8中運行起來。 –

@downvoter小心解釋我的答案有什麼問題？我怎樣才能改善它..？它解決了OP的問題。對於它的價值，這些是CSS表格，而不是HTML表格。這不是黑客。 –

<div id="principal"> 
    <div id="colIzquierda">Some Content</div> 
    <div id="colDerecha">Some Content</div> 
    <div style="clear: both;"></div> 
</div>

爲什麼在你的問題中使用PHP標記？

來源

2014-05-13 18:14:47

感謝文森特，但我不能使它與您的解決方案的工作，我已經有了一個明確的頁腳DIV：兩者;財產......我通過慣性添加了php，sry :) – qalbiol

你試過我的代碼嗎？正如Tim B所提到的，你必須使用清晰的屬性。這應該有效。 –

兩列的網頁，DIV溢出

回答

相關問題