Akışkan bir yapışkan altbilgi nasıl yapılır

Yük yüksekliğinin tarayıcının genişliğine bağlı olabileceği bir yapışkan altbilgiye sahip olmak için bir çözüm arıyorum.Akışkan bir yapışkan altbilgi nasıl yapılır

Akışkan tasarımlarındaki yapışkan altlıklar önemsiz değildir. Yapışkan altbilgileri uygulamak için ipuçları, tartışmalar ve çözümler buldum. Bununla birlikte, tüm bunlar altbilginin sabit ve bilinen bir yüksekliğine bağlıdır. Benim durumumda, altbilgi yüksekliği metin içerir ve çizgi sayısı ekranın genişliğine bağlıdır.

Farklı türden medya sorguları yapmak ve bazı işlerde aorund oluşturmak yerine, yapışkan altlığın otomatik olarak ekranın genişliği değiştiğinde uyum sağladığı temiz bir CSS çözümünü tercih ederim.

Hiçbirinizin nihai cevabı var mı? Böyle

kaynak

2013-06-03 Paul van Haren

olası yinelenen (http://stackoverflow.com/questions/4347133/css-sticky-footers-with-unknown-height) – cimmanon

Evet, soru bir türüdür Yinelenen, ancak cevaplar tatmin edici değil. Neyse ki, benim ihtiyaçlarına uygun güzel yönleri ile başka bir yazıya işaret etti: http://stackoverflow.com/questions/12605816/sticky-flexible-footers-and-headers-css-working-fine-in-webkit-but- değil-in-geko. Buna baktığın için teşekkürler. –

Öğelerden birinin üzerinde "taşma: kaydırma" olduğundan bahsetmediniz. – cimmanon

deneyin şey:

#sticky_footer { 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:10%; 
    background:red; 
    text-align:center; 
}

sıralayabilir gerekebilir: yapışkan altbilgi yüksekliği yüzdesi ile, kabın yüksekliğine görecelidir

http://jsfiddle.net/6BQWE/2/

Medya sorguları ile metin için bazı kenar boşluğu/dolguları, ancak altbilgi boyutları bunlar olmadan dinamik olur.

kaynak

2013-06-03 17:29:05 peterpixels

flexbox'un büyülü dünyasına hoş geldiniz! http://jsfiddle.net/n5BaR/

<body> 
    <style> 
     body { 
      padding: 0; margin: 0; 
      display: flex; 
      min-height: 100vh; 
      flex-direction: column; 
     } 
     main { 
      flex: 1; 
      padding: 1em; 
     } 
     header, footer { 
      background-color: #abc; 
      padding: 1em; 
     } 
    </style> 
    <header>Hello World</header> 
    <main>Content</main> 
    <footer> 
     Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque. 
    </footer> 
</body>

doldurma ve marjlar sadece oldukça küçük bir olmak, ancak sihirli display: flex; min-height: 100vh; flex-direction: column; ve flex: 1; ile olur ... Bu deneyin. Daha fazla bilgi ve diğer örnekler için

CSS3 Esnek Kutu veya FlexBox, bir sayfadaki öğelerden düzenlemesi öngören bir düzen modudur ... http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/Mozilla itibaren

bkz sayfa düzeni, farklı ekran boyutları ve farklı görüntü aygıtları barındırması gerektiğinde, öğeler davranır. ... Not: CSS Esnek Kutular Düzen belirtimi, Aday Öneri aşamasında, olmasına rağmen, tüm tarayıcılar bunu uygulamamıştır.

[Bilinmeyen Yükseklik CSS Sabit Altbilgileri] arasında

kaynak

2013-12-06 19:51:49 Luke

Bu bir # 1 cevap olmalı. Bu gece çok fazla mesaj kazdım. Memnuniyetle seninkini buldum! –

Akışkan bir yapışkan altbilgi nasıl yapılır

cevap

İlgili konular