2016-11-30 7 views
0

ブートストラップを使ってページレイアウトを作成しています。 hereと記載されているように、私のフッタはページの底に縛られています。これは正常に動作します。相対的な親の位置でページの下部にフッターをバインドする方法はありますか?

しかし、私は相対位置でコンテナの内側にフッターを配置すると、フッターをページの底にバインドできません。ここでは例

html, 
 
body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.container{ 
 
    position:relative; 
 
    min-height:100%; 
 
    height:auto !important; 
 
    height:100%; 
 
} 
 

 
header{ 
 
    height:120px; 
 
    background-color:#eee; 
 
} 
 

 
.middle{ 
 
    background-color:#aaa; 
 
} 
 

 
footer{ 
 
    height:120px; 
 
    background-color:#888; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <header> 
 
     Header 
 
    </header> 
 
    <div class="middle"> 
 
     Middle 
 
    </div> 
 
    <footer> 
 
     Footer 
 
    </footer> 
 
    </div> 
 
</body> 
 
</html>

あるだけCSSでそれを行うことは可能ですか?

答えて

1

あなたは、これは、コンテナのdiv

+0

このケースである相対位置で最初の親の下部にフッターを配置します

footer{ position: absolute; bottom: 0; width: 100%; } 

フッターに、このCSSコードを追加する必要がありますIあなたのCSSコードを追加して、フッタはページの下端(良い!)にバインドされていますが、ページの高さが小さいときにオーバーフローヘッダーと中間になります。 – Evgeniy

+0

問題が発生しませんでした...フッタがコンテナを休止します。小さい...フッタが上に行く – Chiller

+0

私はミドルがフッタの高さとして底部からパディングする必要があることを伝えたいと思う。今は大丈夫です! – Evgeniy

関連する問題