ページのフッター/ボトムへの相対的なdivの伸縮

Question

私のメインディビジョンが内容に不足しているときに、私のフッタを下に保つのに苦労しました。しかし、私はそれを固定フッタのトリックで修正しました。しかし残念なことに、私のメインディビジョンがコンテンツに不足しているときにフッタに至るまで、この問題が残ります。メインdivの下端+フッタがビューポートよりも小さい場合、余分なdivを空のスペースに追加することでJSでこれを修正しました。しかし、私は非jsユーザーをサポートしたいので、これはもうオプションではありません。

html, body { 
 
    height: 100%; 
 
    background-color: #678dae; 
 
    
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 

 
#main { 
 
    
 
    width: 70%; 
 
    
 
    /* I need them to be centered like this because my div is being resized from time to time */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    overflow:auto; 
 
    padding-bottom: 150px; 
 
    background-color: #fff; 
 
    
 
} 
 

 

 
#footer {position: relative; 
 
\t margin-top: -150px; /* negative value of footer height */ 
 
\t height: 150px; 
 
    background-color: #333; 
 
\t clear:both; 
 
}

<div id="wrap"> 
 

 
\t <div id="main"> 
 

 
\t \t <div id="content"> 
 
      <p>Div content</p> 
 
      
 
      
 
      <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->  
 
      
 
     
 
\t \t </div> \t 
 

 
\t </div> 
 

 
</div> 
 

 
<div id="footer"> 
 
<p>Footer content</p> 
 
</div>

Answer 1

これを試してください：

#footer { 
    background-color: #333; 
    bottom: 0; 
    height: 150px; 
    position: absolute; 
    width: 100%; 
} 

Answer 2

html, body { 
 
    height: 100%; 
 
    background-color: #678dae; 
 
    
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 

 
#main { 
 
    
 
    width: 70%; 
 
    
 
    /* I need them to be centered like this because my div is being resized from time to time */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    overflow:auto; 
 
    padding-bottom: 150px; 
 
    background-color: #fff; 
 
    
 
} 
 

 

 
#footer { 
 
    position: fixed; 
 
\t margin-top: -150px; /* negative value of footer height */ 
 
\t height: 25px; 
 
    background-color: #333; 
 
    bottom:0; 
 
    width:100%; 
 
}

<div id="wrap"> 
 

 
\t <div id="main"> 
 

 
\t \t <div id="content"> 
 
      <p>Div content</p> 
 
      
 
      
 
      <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->  
 
      
 
     
 
\t \t </div> \t 
 

 
\t </div> 
 

 
</div> 
 

 
<div id="footer"> 
 
<p>Footer content</p> 
 
</div>

私はいくつかのフッターのプロパティ

を変更しました

Answer 3

height: inherit;これは通常、高さの側面に役立ちます...