CSS定位和清晰度

當我寫網站模板時，我有令人沮喪的定位問題。當我使用相對定位來移動頁面的最後一個元素時，在底部我有空的空間。例如：CSS定位和清晰度

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
     <title>Clearfix test</title> 
    </head> 
    <body> 
     <header>a</header> 
     <div id="pageWrapper"> 
      <div id="page"></div> 
     </div> 
     <!--<footer></footer>--> 
    </body> 
</html> 

* { 
    margin-left: auto; 
    margin-right: auto; 
    background: white; 
} 
body { 
    background: grey; 
    padding: 0; 
    margin: 0; 
} 

header { 
    width: 900px; 
    height: 150px; 
    border: 1px solid red; 
} 

#pageWrapper { 
    position:relative; 
    width: 850px; 
    height: 600px; 
    top: -40px; 
    border: 1px solid green; 
} 

#page { 
    position:absolute; 
    top: 25px; 
    left: 25px; 
    border: 1px solid darkgoldenrod; 
    height: 550px;; 
    width: 800px; 
}

有什麼辦法可以去除在頁面底部的這個空白區域？我試圖使用clearfix，但沒有任何運氣。

來源

2013-03-06 user1291806

是怎麼把高度的指定 – Sowmya 2013-03-06 10:22:54

你可以使用'保證金top'，而不是相對定位與''上＃pageWrapper' top'。 – hsan 2013-03-06 10:23:08

這是一個好主意，用margin-top代替相對定位，然後用絕對定位去除div，這將會起作用。謝謝。 – user1291806 2013-03-06 10:45:13

嘗試這種方式。

*{ 
     padding: 0; 
     margin: 0; 
    } 
    body { 
     background: grey;  
    } 
    #container{ 
     width: 900px; 
     margin:0px auto; 
    } 
    header { 
     width: 900px; 
     height: 150px; 
     border: 1px solid red; 
    } 

    #pageWrapper { 
     width:800px; 
     padding:40px; 
     margin:0px auto;  
     border: 1px solid green; 
     margin-top:-40px; 
    } 

    #page { 
     border: 1px solid darkgoldenrod; 
     height:500px; 
    }

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
     <title>Clearfix test</title> 
    </head> 
    <body> 
     <div id="container"> 
     <header>a</header> 
     <div id="pageWrapper"> 
      <div id="page"></div> 
     </div> 
     </div>  
    </body> 
</html>

來源

2013-03-06 10:40:56