CSS，相對定位的div中的絕對div

鑑於以下代碼，我如何使包裝div的高度一直向下延伸。CSS，相對定位的div中的絕對div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
.wrapperDiv { 
    position: relative; 
    width: 800px; 
    background-color: #FFFF00; 
    margin-right: auto; 
    margin-left: auto; 
} 
.content { 
    position: absolute; 
    width: 95%; 
    top: 55px; 
    background-color: #008000; 
} 
.footer { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #FF00FF; 
    bottom: 5px; 
} 
.header { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #CCFF33; 
    top: 5px; 
} 
</style> 
</head> 

<body> 

<div id="wrapper" class="wrapperDiv"> 
    <div id="layer2" class="footer"> 
     3</div> 
    <div id="layer3" class="header"> 
     1</div> 
    <div id="layer1" class="content"> 
     2<br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     END</div> 
</div> 

</body> 

</html>

來源

2009-10-16 ace

補充一點：

html, body, .wrapperDiv { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; 
}

這樣您就可以與你的wrapperDiv比它包含的div更寬的問題。不知道你想要做什麼。

來源

2009-10-16 06:11:03 cletus

感謝您的回覆，我無法解決問題，最終使用了背景圖片。 – ace 2010-01-28 16:02:10

您可以使用JavaScript獲取絕對元素的偏移量並將其添加到父div的高度。

來源

2009-11-05 16:19:00

感謝您的回覆，我無法解決問題，最終使用背景圖片。 – ace 2010-01-28 16:02:58

CSS，相對定位的div中的絕對div

回答

相關問題