1. ホーム
  2. 質問と答え
  3. 下にCSSフッタを付ける

下にCSSフッタを付ける

2016-11-17 17 views
0

私が検索した数多くの方法を試しても、このフッターが底にくっつくように見えません。下にCSSフッタを付ける

基本的には、ページの残りの部分とは別のボックスの影が上部に表示されていて、下部には同じ内容が必要です。内容は真ん中にあります。私は位置0を固定しようとしましたが、これらのメソッドを使用して表示するか、または中央に維持するためにボックスの影を得ることができません。

ありがとうございます！

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-11-17 Tom

+1

フッターを下にしたい場合は、ボックスシャドウが表示され、そのコンテンツは中央に配置されますか？ – GiuServ

答えて

1

マークアップにRyan Fait's sticky footerを適用しました。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.wrap { 
 
    min-height: 100%; 
 
    margin-bottom: -60px; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
</div> 
 
<div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
    footer 
 
    </div> 
 
</div>

出典

2016-11-17 15:36:41 hungerstar

+0

完璧に働き、素晴らしい仕事をしています。 – Tom

1

次のCSS

.footer-wrapper 
{ 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    bottom: 0px; /* add this line */ 
    position:fixed; /* add this line */ 
}

を確認し、このことができます願っています。

出典

2016-11-17 15:36:13 reza

+0

それは底のおかげでそれを固執しますが、それはフッタをオフセンターのままにします – Tom

+1

この回答に適用する必要があるいくつかの修正があります。まず、 'width：100％;'を.footer-wrapperに設定します。次に、フッタの高さに等しい '＃content'のボトムマージンを設定する必要があります。そのため、コンテンツは、固定された配置のために重なっているフッタ要素によって隠されません。 – hungerstar

1

あなたはmin-heightプロパティとCSSのcalc()機能を使用することができます。

同様：

html 
 
{ 
 
/* \t overflow-y: scroll; */ 
 
} 
 
body \t 
 
{ 
 
\t margin:0; 
 
\t background-color:#ffffff; 
 
\t font-family:'Ubuntu',sans-serif; 
 
} 
 
div 
 
{ 
 
\t display:block; 
 
} 
 
.header-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
.container 
 
{ 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t width:940px; 
 
} 
 
.container:before, .container:after 
 
{ 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header 
 
{ 
 
\t height:60px; 
 
\t padding:20px 0 25px 0; 
 
} 
 
#header .logo 
 
{ 
 
\t float:left; 
 
} 
 
#header .logo a 
 
{ 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url('/test/_assets/img/header-logo.png') no-repeat 0px 1px; 
 
\t background-size: 270px 60px; 
 
} 
 
#header .american-flag 
 
{ 
 
\t display:block; 
 
\t float:right; 
 
} 
 
#header .american-flag img 
 
{ 
 
\t max-height:60px; 
 
} 
 
#content 
 
{ 
 
\t height:100%; 
 
\t padding:20px 0 0 0; 
 
} 
 
body a 
 
{ 
 
\t color:red; 
 
\t text-decoration:none; 
 
} 
 
body a:hover 
 
{ 
 
\t text-decoration: underline; 
 
} 
 
.footer-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
#footer 
 
{ 
 
\t line-height:60px; 
 
\t height:60px; 
 
} 
 

 
#content { 
 
    min-height: calc(100vh - 185px); 
 
}
<div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
      <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     \t FLAG 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container" id="content"> 
 
Site content 
 
</div> 
 
<div class="footer-wrapper"> 
 
\t <div class="container" id="footer"> 
 
\t footer 
 
\t </div> 
 
</div>

・ホープ、このことができます：

#content { 
    min-height: calc(100vh - 200px); // Viewport Height (100%) - Remaining space of the content & header (135px) 
}

は、以下のスニペットを見てください！

出典

2016-11-17 15:37:30

+1

下部には、ビューポートとフッタの底部の間に隙間があります。 – hungerstar

+1

@hungerstar私の更新されたコードを見てください！ –

1

あなたは.footer-wrapperクラスに以下を追加する必要があります。それはコードスニペットのように良い見ていないので、ここで

.footer-wrapper { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
}

はアクションで、それのフィドルです：https://jsfiddle.net/jm2rveqc/

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-11-17 15:40:40

+0

フッタの高さに等しいコンテンツ要素にマージンを適用する必要があります。そのため、コンテンツはオーバーラッピングフッター要素によって隠されません。 – hungerstar

-1

はithisですか？

#footer { 
     line-height: 60px; 
     height: 60px; 
     position:absolute; 
     bottom:0; 
    }

出典

2016-11-17 15:42:43 Matoeil

+0

これは試しましたか？それは実際に動作しますか？ – hungerstar

+0

はい。なぜ落選ですか？ http://codepen.io/matoeil/pen/Woopdq – Matoeil

+0

これは動作しません。おそらく、いくつかのコンテンツ[ユーザーがスクロールしなければならない場所]の例（http://codepen.io/anon/pen/dOOWxb）。 – hungerstar

0

私は単にそのような場合のためにフレキシボックスを使用します。

単に

body { 
    margin: 0; 
    background-color: #ffffff; 
    font-family: 'Ubuntu', sans-serif; 
    display: flex; 
    flex-direction: column; 
}

あなたの体にdisplay: flexとflex-direction: columnを追加し、最終的にあなたのフッターラッパー

01に margin-top: autoを追加 

html, body { 
    height: 100%; 
}
に 

html { 
    overflow-y: scroll; 
}

を変更

.footer-wrapper { 
    margin-top: auto; 
}

出典

2016-11-17 15:52:19 SvenL

関連する問題

 関連する問題