Question

当我写网站模板时，我对定位感到沮丧。当我使用相对定位来移动页面的最后一个元素时，在底部我有空的空间。例如：

<!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但没有运气。

Answer 1

你已经给了top:-40px

是#pagewrapper空间

将其删除并享受

Answer 2

在您的CSS中，#pagewrapper代替top:-40px;只需给top:0px;

Working Demo

Answer 3

试试这种方式。

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

CSS定位和clearfix

3 个答案: