0

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

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

4

3 回答 3

1

你给了top:-40px

这是#pagewrapper空间

删除它并享受

于 2013-03-06T10:24:25.300 回答
0

在你的 CSS 中，#pagewrapper而不是top:-40px; 只要给top:0px;

工作演示

于 2013-03-06T10:32:52.693 回答
0

试试这个方法。

*{
        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-06T10:40:56.880 回答