フッターがページの底に付いていない

フッターがページの下部に貼り付いていません。私はすでに次のことを試してみました：（StackOverflowの上で見つかった）これらのソリューションのフッターがページの底に付いていない

footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: rgba(255,255,255,0.2); 
    position: absolute; 
    bottom: 0; 
} 

footer { 
    height: 50px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    background-color: #00A; 
    z-index: 150; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 30px; 
}

どれもこれまでの私のために働いていないので、私は私が持っているものでcodepenをした：

http://codepen.io/sredmond/pen/revjdv

をあなたはコードよりも結果の詳細を参照するように、コードペンを展開すると、あなたはそれが私はそれが行くされて何をしたいのか

NAVBAR 

JUMBOTRON 

CONTENT 

FOOTER 
<!-- 


Random white space 


-->

のままいることがわかりますこのように：

NAVBAR 

JUMBOTRON 

CONTENT 









FOOTER

ありがとう！

出典

2016-04-16 ghost1349

がfooter内divであなたの.rowを入れて、多分行クラスは、自分の位置の設定を上書きします。

ない：

<footer class="row"></footer>

しかし：

<footer><div class="row"></div></footer>

そして：

footer { 
    position: fixed; 
    left: 0; bottom: 0; right: 0; 
}

EDIT

ですから、フレキシボックス（またはトンを必要としますABLES、フレキシボックスがsimplierが、互換性の少ない下位である）：

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">Project</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About</a></li> 
        <li><a href="/Home/Portfolio">Portfolio</a></li> 

        <li><a href="/Home/Contact">Contact</a></li> 

        <li><a href="/Home/Terms">Terms Of Service</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm"> 
        <li> 
         <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
        </li> 
        <li> 
         <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
        </li> 
        <li> 
         <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
        </li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center"> 
        <li class="social-icons"> 
         <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
         <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
         <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
        </li> 
       </ul> 

</div> 
     </div> 
    </div> 

    <div class="container body-content"> 

     <div class="content-wrapper"> 
     <div class="content-body"> 

     <div class="jumbotron"> 
      <h1 class="text-center">Portfolio</h1> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">PeppNation</h4> 
       <a href="http://www.peppnation.techuhost.com" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/> 
       </a> 
      </div> 

      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">Brock Report - Publications Page</h4> 
       <a href="http://brockreport.com/publications.aspx" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/> 
       </a> 
      </div> 

      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">Camp BASIC</h4> 
       <a href="http://campbasicdev.dev2.nsrit.com/" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/> 
       </a> 
      </div> 
     </div> 

     </div> 

     <footer class="content-footer"> 
       <div class="row text-center"> 
       <div class="col-xs-12 col-md-2"> 
        <h4 class="bold">TechU</h4> 
        <p><a href="/Home/Terms">Terms Of Service</a></p> 
        <p>&copy; 2016 - TechU</p> 
       </div> 

       <div class="col-xs-12 col-md-3"> 
        <h4 class="bold">Contact Information</h4> 
        <p>Phone: <strong><a href="tel:4142555423">(414) 255-5423</a></strong></p> 
        <p>Email: <strong><a href="mailto:[email protected]">[email protected]</a></strong></p> 
       </div> 

       <div class="col-xs-12 col-md-3"> 
        <h4 class="bold">Business Hours</h4> 
        <p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p> 
        <p>Saturday & Sunday: <strong>Closed</strong></p> 
       </div> 

       <div class="col-xs-12 col-md-4"> 
        <ul class="nav navbar-nav hidden-xs footer-social-button-align"> 
         <li> 
          <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
         </li> 
         <li> 
          <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
         </li> 
         <li> 
          <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav hidden-md hidden-lg hidden-sm"> 
         <li class="social-icons"> 
          <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
          <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
          <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
         </li> 
        </ul> 
       </div> 
       </div> 
     </footer> 

    </div> 

    </div> 
</body>

& CSS

html, body { 
    height: 100%; 
    padding-top: 0; 
    background-color: #cccccc; 
} 

.body-content { 
    height: 100%; 
} 

.content-wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100% 
} 

.content-body { 
    flex: 1 0 auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-top: 50px; 
} 

.content-footer { 
    flex: 0 0 auto; 
}

出典

2016-04-16 16:09:15

それはうまくいったようですが、私の望むやり方ではありません。http://codepen.io/sredmond/pen/revjdvには、ボディコンテンツコンテナ内にフッターを置く方法はありますか？ – ghost1349

位置固定は常に要素をウィンドウに連結します。要素の一部にならない場合は、絶対位置を使用する必要があります。しかし、両方が他の要素とは独立していることを覚えておく必要があります。そのため、フッターの高さが拡大してビューポートの幅が変更された場合、コンテンツにオーバーラップします。 –

このフッターをページの下部に固定し、このボディコンテンツコンテナの背景を常に下にしますか？ –

コンテンツがない場合は、HTMLタグと本文タグが画面の下部に表示されないという問題があります。あなたのHTMLが下に展開させるこのCSSを追加するには：

html, 
body { 
    margin:0; /* removes any margin (especially at the bottom) */ 
    padding:0; /* removes any padding (especially at the bottom) */ 
    height:100%; /* will make it expand to the end */ 
}

出典

2016-04-16 16:03:56 chickahoona

固定位置はボディの高さとは関係がありません。 –

私はいつも使っているスニペットです。たぶん体はそれと関係がなく、 "html"だけで十分です。もしあなたが確信していれば私の解決策を自由に編集してください。 – chickahoona

私はこの何度も試してみました、それは私のために完璧に動作します。

https://css-tricks.com/snippets/css/sticky-footer/

はそれが役に立てば幸い:)

出典

2016-04-16 16:17:49

フッターがページの底に付いていない

答えて

関連する問題