幫助DIV佈局和CSS高度

請參閱截圖。我試圖製作一個佈局，允許我使用div左側（headerLeft）和右側（headerRight）將陰影應用於主div的任一側，然後我擁有包含標題內容的內容div（標題）。這全部包裹在一個div（headerWrapper）中。我使用4個div來做到這一點。我有它在我的標題，導航欄和我正在使用的另一個欄上工作。這在屏幕截圖中用顏色編碼的div顯示。這工作的原因是因爲我的CSS使用像素給定的高度。但是我有問題。我想將此應用於我的主要內容，但不起作用。內容在頁面之間的高度會發生變化，這很好，但是我的包含陰影的div不會出現，除非我給他們一個固定的像素高度。請幫助。紅色區域顯示包含陰影的左側和右側div應顯示在哪裏。幫助DIV佈局和CSS高度

layoutProblem http://www.webquark.co.uk/layoutProblem.jpg

這裏是CSS我對這項工作的佈局：

#header{ 
margin:0 auto; 
height:160px; 
width: 76%; 
min-width:850px; 
font-size: 14pt; 
font-family: Calibri, Verdana, Ariel, sans-serif; 
color: #ffffff; 
background-image: url(headerBG.jpg); 
background-repeat: repeat-x; 
} 

#headerWrapper{ 
height:145px; 
width:100%; 
/**background-color: #202020;**/ 
} 

#headerLeft 
{ 
float: left; 
width: 12%; 
height:145px; 
background-image: url(shadowLeft.png); 
background-repeat: repeat-y; 
background-position: center right; 
/**background-color: #1e1e1e;**/ 
} 

#headerRight 
{ 
float: right; 
width: 12%; 
height:145px; 
background-image: url(shadowRight.png); 
background-repeat: repeat-y; 
background-position: center left; 
/**background-color: #1e1e1e;**/ 
}

Basicly我想我需要離開使左，右的div高度100％的，我已經嘗試設置高度到100％，但它沒有工作。我也有我的身高設置爲100％

乾杯，希望你能幫助。

HTML的工作頂欄和標題：

<div id="topWrapper"> 
<div id="topRight"> 
</div> 
<div id="topLeft"> 
</div> 
<div id="top"> 
</div> 
</div> 


<div id="headerWrapper"> 
<div id="headerRight"> 
</div> 
<div id="headerLeft"> 
</div> 
<div id="header"> 
</div> 
</div>

來源

2009-08-13 Cool Hand Luke UK

你可以發佈你的html以及嗎？或鏈接到您的演示頁面/正在進行中的頁面？我可以看看CSS在做什麼，但很難確定它沒有看到它所附帶的內容。歡呼=] – 2009-08-13 17:20:41

我已添加我的html – 2009-08-13 17:42:03

我會使用一個透明的PNG陰影，1px高。它將包含左側的陰影，然後是空白區域內容/標題的寬度，然後是右側陰影。在下面的例子中，這將是1x932像素。

示例代碼：

<style type="text/css"> 
    #headerBG { 
    background: gray url("repeating-background"); 
    } 
    #contentBG { 
    background: red url("repeating-background"); 
    } 
    .shadow { 
    width: 900px; /* width of inner content */ 
    margin: 0 auto; 
    padding: 0 16px; /* width of shadow bit */ 
    background: transparent url("new-shadow") repeat-y; 
    } 
</style> 

<div id="headerBG"> 
    <div class="shadow"> 
    header content 
    </div> 
    <div class="shadow"> 
    navigation 
    </div> 
</div> 

<div id="contentBG"> 
    <div class="shadow"> 
    body content 
    </div> 
</div>

有關頁眉/身體的不同的背景色，你要麼需要添加額外的div陰影內（圍繞內容），或創建多個陰影影像，其中中間的空白位包含正確的背景顏色。但是，如果您使用單獨的圖像填充標題，那麼您可能只用身體顏色即可消除 - 標題將覆蓋該標題。

來源

2009-08-13 15:20:05 DisgruntledGoat

乾杯，根據你所說的作品。雖然改變了一些東西。 – 2009-08-15 15:33:31

獲取的div匹配的高度是很難用CSS做。這樣做有一些技巧，但我認爲這裏有一個更簡單的解決方案。

爲什麼不只是使紅色圖案的身體背景圖像，並讓它瓷磚？如果你想展示別的東西，只要把它放在最前面。從我所看到的您的設計中，這看起來對我來說是最簡單的解決方案。

如果你想試着讓divs匹配高度，我建議使用absolute columns trick。這樣的事情會的工作，我認爲：（雖然我還沒有實際測試過。）

<div id="content"> 
    <div id="left-shadow"></div> 
    <div id="text"> 
     text goes here 
    </div> 
    <div id="right-shadow"></div> 
</div>

有了這個CSS：

#content { 
    position: absolute; 
} 
    #left-shadow { 
     position: relative; 
     left: 0; top: 0; bottom: 0; 
     /* width needs to be specified */ 
    } 
    #text { 
     /* width needs to be specified */ 
    } 
    #right-shadow { 
     position: relative; 
     right: 0; top: 0; bottom: 0; 
     /* width needs to be specified */ 
    }

，然後設置模式爲背景圖像的左/右陰影。

來源

2009-08-13 14:54:11

幫助DIV佈局和CSS高度

回答

相關問題