SORU
24 Ocak 2014, Cuma


Bootstrap 3 Floş alt altbilgi. sabit

Tasarlıyorum bir site Bootstrap 3 kullanıyorum.

Bu örnek gibi bir footer yapmak istiyorum. Sample

Lütfen gezinti çubuğu-sabit-alt sorunumu çözmüyor yani bootstrap TAMİR istemiyorum unutmayın. Ben her zaman içeriği alt kısmında olmak istiyorum ve aynı zamanda duyarlı olmak.

Herhangi bir rehberlik çok takdir edilecektir.


DÜZENLEME:

Özür dilerim anlatamadım. Artık ne zaman içeriği vücudun yeterli içerik yok. Benim altbilgi yukarı doğru hareket eder ve daha sonra altta bir boşluk bırakır.

Bu artık benim için bir gezinti çubuğu var

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

CEVAP
24 Ocak 2014, Cuma


Örnekte, Bu sayfaya daha fazla içerik varsa Altbilgi sayfa daha az içerik varsa Eğer alt sopa konumunu ve normal altbilgi gibi davranır.

Demo Tutorial

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
 </div>
 <div class="footer">
   <p>Copyright (c) 2008</p>
 </div>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Boiler Room

    Boiler Room

    10 Mayıs 2012
  • girleffect

    girleffect

    20 Mayıs 2008
  • snookie77

    snookie77

    2 Mart 2006