CSS：製作一個元素填補了瀏覽器的寬度，同時保持一個定義的寬度

我試圖創建CSS佈局如下中心的其他元素：CSS：製作一個元素填補了瀏覽器的寬度，同時保持一個定義的寬度

enter image description here

這是一個典型的網絡佈局，其中所有該內容位於具有定義寬度並以頁面爲中心的包裝DIV中。

但是，紫色背景是一個CSS漸變，需要填充瀏覽器的整個寬度（而不僅僅是內容包裝的寬度）。此外，不同的頁面會有不同的標題/簡介文本行（例如，某些頁面可能有3行，其他頁面只有1行），因此紫色背景需要與此內容的高度相匹配。

我也在使用一個內容管理系統，它將所有內容放在一個有寬度的包裝中，並且以margin:auto爲中心。

如何實現佈局？

起初我雖然可以在標題/介紹div上使用position:absolute。這很好。除了其他內容被隱藏在標題/簡介div後面。參見這裏的示例：http://jsfiddle.net/5BkX6/1/

然後我的標題/前奏DIV使用position:relative，然後使用負左值連同填充以拉伸DIV的背景，同時保持爲中心的內容試圖。請看這裏的一個例子：http://jsfiddle.net/4DZYr/1/

這種方法很好，除了它創建一個水平滾動條。我知道我可以將overflow-x：hidden應用於主包裝器DIV以隱藏滾動條，但我寧願不要將它放在第一位。

我該如何實現自己的目標。我不想用jquery來獲得標題/介紹DIV的高度。

來源

2012-10-06 big_smile

這應該給你想要的^^ 這裏的佈局是HTML

<body> 
<div class="header"> 
<div class="contentheader">This is the header</div> 
</div> 
<div class="container"> 
    <div class="content"> 
     <div class="left"></div> 
     <div class="right"></div> 
    </div> 
</div> 
</body>

這裏是風格

.header{ 
width : 100%; 
background : #0033aa; 
height : 100px; 
} 
.contentheader{ 
width : 1000px; 
margin : 0 auto; 
} 
.container{width : 100%; 
} 
.content{ 
width : 1000px; 
margin : 0 auto; 
} 
.left { 
width : 300px; 
display : inline-block; 
height : 200px; 
background : #3300aa;} 
.right{ 
width : 700px; 
display : inline-block; 
height : 200px; 
background : #aa0033;}

來源

2012-10-06 14:45:00

CSS：製作一個元素填補了瀏覽器的寬度，同時保持一個定義的寬度

回答

相關問題