Html CSS定位和clearfix_Html_Css - Fatal编程技术网

Html CSS定位和clearfix

html css

Html CSS定位和clearfix,html,css,Html,Css,当我编写网站模板时，我遇到了令人沮丧的定位问题。当我使用相对定位将页面的最后一个元素移到更高的位置时，底部的空间是空的。例如： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" hr

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

<!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测试
A.
* {
左边距：自动；
右边距：自动；
背景：白色；
}
身体{
背景：灰色；
填充：0；
保证金：0；
}
标题{
宽度：900px；
高度：150像素；
边框：1px纯红；
}
#包装纸{
位置：相对位置；
宽度：850px；
高度：600px；
顶部：-40px；
边框：1px纯绿色；
}
#页面{
位置：绝对位置；
顶部：25px；
左：25px；
边框：1px实心暗金色；
高度：550px；；
宽度：800px；
}

有没有办法删除页面底部的空白区域？我试图使用clearfix，但没有任何运气。

您已经给出了

top:-40px

它是

#pagewrapper

空间

删除它并在css中享受

#pagewrapper

而不是

top:-40px

；只需给出

top:0px
试试这种方法
*{
        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;
     }



Clearfix测试
A.
这是因为指定的高度，您可以使用页边距顶部
而不是页面包装上的顶部的相对定位。这是一个好主意，用页边距顶部替换相对定位，然后用绝对定位移除div，这将起作用。谢谢。我不能这样做，因为页面包装器必须在这个位置，它必须抓住页眉。然后给页眉高度：110px
<!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>