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

  • dougownsall

    dougownsall

    7 EKİM 2007
  • Kassem G

    Kassem G

    25 EKİM 2006
  • RaverX DouBle StAg XI

    RaverX DouBl

    23 Mayıs 2008