Sayfa alt kısmına bastırma ayağı (önyükleme)

Oluşturduğum bir sitem var ve takılıyorum. Site, bootstrap kullanıyor ve altbilginin, içeriğin olup olmadığına bakılmaksızın sayfanın alt kısmında kalması konusunda sorun yaşıyorum. Viewport'ta kalmasını istemiyorum, içeriğin sonunda olmasını istiyorum. Bu Takip ettiğim öğretici, ama işe yaramıyor:Sayfa alt kısmına bastırma ayağı (önyükleme)

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Şu anda alt bilgi içeriğinin ortasında kalmış.

#container kimliğinin #body içeriğinin tamamını kapsamadığına dair bir teorim var. Elemanları incelediğimde, <div class = "jumbotron home"></div> ve <h1>oot</h1> elemanlarından #container duruşa benziyor. Bunun neden olduğundan emin değilim, ya da haklıysam bile.

sürümü buradan görebilirsiniz:

style.css

/* 

Theme Name: Oot 
Author: Deep Space Development Team 
Version: 1.0 

*/ 

/****************************************************************************************** 

GENERIC STYLES 

******************************************************************************************/ 

body{ 
    background: #fdfdfd; 
} 

a{ 
    color: black; 
    text-decoration: none; 
} 

.jumbotron{ 
    margin: 0 !important; 
} 




/****************************************************************************************** 

HEADER 

******************************************************************************************/ 

.navbar-default{ 

} 

.navbar-nav{ 
    float: right !important; 

} 

.navbar-brand{ 
    color: #333 !important; 
} 

#logo{ 
    width: auto; 
    height: 30px; 
    margin-top: -5px; 
} 


/****************************************************************************************** 

FOOTER 

******************************************************************************************/ 

#footer{ 
    background: deepskyblue; 
} 

#footer p, #footer a{ 
    margin-top: 1.6em; 
    color: #fff; 
} 



/****************************************************************************************** 

HOME 

******************************************************************************************/ 

.home{ 
    background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://images.unsplash.com/photo-1457213453084-d386450c6252?crop=entropy&dpr=2&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1300); 
    background-size: cover; 
    background-position: center; 
    height: 40em; 


} 


/****************************************************************************************** 
MISC. 
******************************************************************************************/ 

.center{ 
    text-align: center; 
} 

.text-wrap{ 
    word-wrap: break-word; 
} 



/****************************************************************************************************** 

CODE TO KEEP FOOTER ON BOTTOM 

******************************************************************************************************/ 
html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ededed; 
    padding:10px; 
} 
#body { 
    padding-bottom:100px; /* Height of the footer element */ 
} 
#footer { 
    background:#ffab62; 
    width:100%; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

/****************************************************************************************** 

MEDIA-QUERY 

******************************************************************************************/ 

@media (max-width: 768px) { 

    .nav li a{ 
     margin-left: 15px; 
    } 

    .navbar-nav{ 
     float: none !important; 

    } 

    .navbar-nav li{ 
     width: 100%; 
     text-align: center; 
    } 



}

header.php

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 


     <!-- Bootstrap--> 
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

     <!-- Custom css file --> 
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" /> 

     <title>Oot</title> 
    </head> 

    <body> 
     <div id = "container"> 

      <div id = "header"> 
       <?php include 'menu.php'; ?> 
      </div><!--end of #header--> 

      <div id = "body">

: Burada

https://oot-janaaron97.c9users.io kodsayfa home.php

<?php get_header();?> 


       <div class = "jumbotron home"></div> 

       <h1 class = "center text-wrap">Oot</h1> 


       <div class = "col-md-4"> 
        <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p> 
       </div> 

       <div class = "col-md-4"> 
        <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p> 
       </div> 

       <div class = "col-md-4"> 
        <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p> 
       </div> 


      </div> 


<?php get_footer();?>

footer.php

  <div id = "footer"> 

        <div class = "col-md-4"> 
         <h1>TEST</h1> 
         <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p> 
        </div> 

        <div class = "col-md-4"> 
         <h1>TEST</h1> 
         <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p> 
        </div> 

        <div class = "col-md-4"> 
         <h1>TEST</h1> 
         <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p> 
        </div> 


      </div> 

     </div> 

    </body> 
</html>

teşekkürler!

kaynak

2016-04-12 Aaronpd1

"Yapışkan altbilgi" arıyorsanız, inanıyorum. –

php .. yerine oluşturulan HTML işaretiyle bir demo oluşturabilir misiniz? Bu sorunu çözmek isteyen herkes için –

plnkr - https://plnkr.co/edit/rhDZV4jNUiHkkVg0yOOW?p=preview – KieranDotCo

aşağıdaki şekilde #footer css değiştirmeyi deneyin:

#footer { 
    background: #ffab62; 
    width: 100%; 
    height: 100%; 
    /* position: absolute; - remove this*/ 
    /* bottom: 0; - remove this*/ 
    /* left: 0; - remove this*/ 
}

altbilgi sonra sadece doğal sit olacaktır <body> içerik sona erdiğinde her yerde

===

GÜNCELLEME CEVAP

Vücuduna clearfix sınıfını eklemeye çalışın

<div id="body" class="clearfix">

kaynak

2016-04-12 15:54:28

hayır, bu oldukça yapmadı . altbilgi gitti ve ".col-md-4" hizalanmamış. Bunlar içeriğin sonundadır, ancak içerik aynı değilse, .col-md-4'ler hizalanmayacaktır, çünkü içeriği takip ederler. – Aaronpd1

, içeriğin bir kısmı diğerinden daha uzunsa, ".col-md-4" değerleri hizalanmaz. – Aaronpd1

Yayınlayabileceğiniz koda [keman bağlantısı] (https://fiddle.jshell.net/) var mı? –

Sayfa alt kısmına bastırma ayağı (önyükleme)

cevap

İlgili konular