兩個固定寬度的全高柱，無縫過渡到空白

enter image description here 兩個固定寬度的全高柱，無縫過渡到空白

我無法創造這樣的設計。 #container應該居中，它的兩個孩子#navigation和#content延伸到瀏覽器的底部。像這樣的例子。

#container { 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
} 
#navigation { 
    width: 200px; 
    height: 100%; 
    float: left; 
} 
#content { 
    width: 760px; 
    height: 100%; 
    float: left; 
}

但我不知道我怎樣才能創建容器外的彩色空白，這將融合在一起的#navigation和#content創建從#container的無縫過渡到空白空間之外。

#navigation和#content之間的轉換應該是唯一可見的。

我試過漂浮#container與其他兩個div包含相同的背景顏色#navigation和#content，但它混淆了它，並把它從中心。我怎樣才能讓我的#container居中，並在每邊都有兩個div來填充剩餘空間？

此外，藍色和紅色的「空白」空間應該同樣寬。除此之外，繪圖是準確的。

來源

2012-01-18 Henrik Skogmo

你需要哪些瀏覽器支持？ – thirtydot 2012-01-18 00:56:56

@thirtydot較新的瀏覽器。對於這個問題，不再關心IE6。你想要更具體的答案嗎？ – 2012-01-18 00:58:32

這是你在追求什麼？ http://jsbin.com/amunuz – thirtydot 2012-01-18 01:09:43

見：http://jsbin.com/amunuz

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    html, body { 
    height: 100%; 
    } 
    body { 
    margin: 0; 
    background: -moz-linear-gradient(left, #ff0000 50%, #00a9ff 50%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#ff0000), color-stop(50%,#00a9ff)); 
    background: -webkit-linear-gradient(left, #ff0000 50%,#00a9ff 50%); 
    background: -o-linear-gradient(left, #ff0000 50%,#00a9ff 50%); 
    background: -ms-linear-gradient(left, #ff0000 50%,#00a9ff 50%); 
    background: linear-gradient(left, #ff0000 50%,#00a9ff 50%); 
    } 
    #container { 
    height: 100%; 
    display: table; 
    table-layout: fixed; 
    width: 960px; 
    margin: 0 auto; 
    } 
    #navigation { 
    display: table-cell; 
    width: 200px; 
    background: #ff0000; 
    } 
    #content { 
    display: table-cell; 
    background: #00a9ff; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
    <div id="navigation">navigation</div> 
    <div id="content">content</div> 
    </div> 
</body> 
</html>

來源

2012-01-18 04:53:58 thirtydot

這只是我對評論做出的回答。 – thirtydot 2012-01-18 04:54:10

看起來像-moz，-webkit和-ms標籤做的伎倆。我從來沒有用過它們，所以沒有足夠的與他們。你碰巧有一個網站或資源，我可以閱讀這種事情？謝謝！ – 2012-01-18 10:34:10

不客氣。只需Google「CSS3漸變」即可獲得所有您想要的信息。在這種情況下，CSS漸變並不是實際需要的。我只是爲了方便而使用它們。你可以用一個寬廣的'background-image'來代替它們，兩種顏色在中間相遇，就像這樣：http://jsbin.com/amunuz/2（image：http://i.stack.imgur.com/ P5NxB.png） – thirtydot 2012-01-18 10:55:59

兩個固定寬度的全高柱，無縫過渡到空白

回答

相關問題