Позиционирование CSS и clearfix

Когда я писал шаблон сайта, у меня была неприятная проблема с позиционированием. Когда я использую относительное позиционирование для перемещения верхнего элемента страницы, внизу я имел пустое пространство. Например:Позиционирование CSS и clearfix

<!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

Вы можете использовать 'маржинального-top' вместо относительного позиционирования с' top' на '# pageWrapper'. – hsan

Это хорошая идея, чтобы заменить относительное позиционирование по краю сверху, а затем удалить div с абсолютным позиционированием, и это будет работать. Благодарю. – user1291806

Попробуйте этот путь.

*{ 
     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