Question

我想将页面划分为3个部分（标题，内容，页脚）。问题是页脚不应该在底部，它位于页面的中间。我做错了什么？

#page{
     margin: 0 auto;
           
    }
    
    html{ height:100%;
          margin:0;
      padding:0;}
    
    body{
        height:100%;
        margin:0;
        padding:0;
        background:#FFF;
        font-family: verdana;
        background-color: white;
    }
    
    
    #header{
         top: 0px;
    	width: 100%;
    	height:2.5em;
    	border-bottom: 1px solid rgba(168, 164, 164, 1); 
         background-color: #FAF0E6;
    }
    
    #content{ a
        
    	
    	 width: 100%;
    	 height:100%; 
            text-align: center;
       
    }
    
    
    #formulario{
        width:48em;
        
        margin-top:2em ;
        margin-right: auto;
        margin-left:auto;
       
     
    }
    
    #footer{
        
            margin-top:2em;
            margin-bottom: 0px; 
            bottom:0em;
            
         
            font-size: 1em;
            font-family: "lucida grande";
            text-align: center;
            
            
    	width: 100%;
    	height:1.5em;
            background-color: #D0F5A9;   
            
    }

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
     <div id="page">
     <div id="header">
     hi
    </div>
     <div id="content">
     <div id="formulario" >hi
     </div>
</div>
     <div id="footer">
    hi</div>
    
    </div>
    </body>`enter code here`
    </html>`enter code here`

感谢您的帮助

Answer 1

我建议您使用class代替id作为最佳做法，因为id只能使用一次，但您可以多次使用class。你可以这样做：

Fiddle [已编辑]

上的演示

也看看这个Fiddle。

＆＃13;

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    font-family: verdana;
    background-color: white;
    background: #FFF;
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    background-color: #FAF0E6;
    position: relative;
    width: 100%;
    height: 2.5em;
    border-bottom: 1px solid rgba(168, 164, 164, 1);
}
.content {
    position: relative;
    width: 100%;
    min-height: 100%;
    text-align: center;
    margin-top: -2.5em;
    margin-bottom: -1.5em;
    padding-top: 2.5em;
    padding-bottom: 1.5em;
}
.formulario {
    width: 48em;
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
}
.footer {
    background-color: #D0F5A9;
    position: relative;
    width: 100%;
    height: 1.5em;
    font-family:"lucida grande";
    font-size: 1em;
    text-align: center;
}

＆＃13;

<div class="header">hi</div>
<div class="content">
    <div class="formulario">HI!</div>
</div>
<div class="footer">hi</div>

＆＃13;

Answer 2

＆＃13;

#page{
 margin: 0 auto;

}

html{ height:100%;
      margin:0;
  padding:0;}

body{
    height:100%;
    margin:0;
    padding:0;
    background:#FFF;
    font-family: verdana;
    background-color: white;
}


#header{
     top: 0px;
    width: 100%;
    height:2.5em;
    border-bottom: 1px solid rgba(168, 164, 164, 1); 
     background-color: #FAF0E6;
}

#content{ a


     width: 100%;
     height:100%; 
        text-align: center;

}


#formulario{
    width:48em;

    margin-top:2em ;
    margin-right: auto;
    margin-left:auto;


}

#footer{

        margin-top:2em;
        margin-bottom: 0px; 
        bottom:0em;
position:absolute;

        font-size: 1em;
        font-family: "lucida grande";
        text-align: center;


    width: 100%;
    height:1.5em;
        background-color: #D0F5A9;   

}

＆＃13;

<body>

 <div id="page">
 <div id="header">
 hi
</div>
 <div id="content">
 <div id="formulario" >hi
 </div>
 <div id="footer">
hi</div>
</div>
</div>
</body>

＆＃13;

＆＃13; 您应该使用position:absolute;作为页脚

Answer 3

有两件事需要注意：

footer DIV不应该是content DIV的子节点。因为footer是header。
更改DOM位置的页脚后 position:fixed;bottom:0;和position: absolute; bottom:0; 适合您的情况。

This is My JSFiddle.

Answer 4

您需要在页脚ID中添加position属性并将其设置为absolute。你没有提到页脚的位置，这就是为什么它在中间。

像那样

#footer{

    margin-top:2em;
    margin-bottom: 0px; 
    bottom:0em;
    position:absolute;

    font-size: 1em;
    font-family: "lucida grande";
    text-align: center;


width: 100%;
height:1.5em;
    background-color: #D0F5A9;

}

＆＃13;

#page{
     margin: 0 auto;
           
    }
    
    html{ height:100%;
          margin:0;
      padding:0;}
    
    body{
        height:100%;
        margin:0;
        padding:0;
        background:#FFF;
        font-family: verdana;
        background-color: white;
    }
    
    
    #header{
         top: 0px;
    	width: 100%;
    	height:2.5em;
    	border-bottom: 1px solid rgba(168, 164, 164, 1); 
         background-color: #FAF0E6;
    }
    
    #content{ a
        
    	
    	 width: 100%;
    	 height:100%; 
            text-align: center;
       
    }
    
    
    #formulario{
        width:48em;
        
        margin-top:2em ;
        margin-right: auto;
        margin-left:auto;
       
     
    }
    
    #footer{
        
            margin-top:2em;
            margin-bottom: 0px; 
            bottom:0em;
            
         
            font-size: 1em;
            font-family: "lucida grande";
            text-align: center;
            
            
    	width: 100%;
    	height:1.5em;

        position:absolute;

            background-color: #D0F5A9;   
            
    }

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
     <div id="page">
     <div id="header">
     hi
    </div>
     <div id="content">
A
A
A
A
A
v
A

     <div id="formulario" >hi
     </div>
</div>
     <div id="footer">
    This is footer</div>
    
    </div>
    </body>
    </html>

＆＃13;

CSS页脚不在底部（无效位置绝对或固定）

4 个答案:

Fiddle [已编辑]

也看看这个Fiddle。