Jak utworzyć lepką stopkę z płynem

Szukam rozwiązania, które ma lepkie stopki, których wysokość może zależeć od szerokości przeglądarki.Jak utworzyć lepką stopkę z płynem

Przyklejone stopki w projektach płynów nie są wcale takie proste. Znalazłem podpowiedzi, dyskusje i rozwiązania w celu zaimplementowania lepkich stopek. Jednak wszystkie te są zależne od stałej i znanej wysokości stopki. W moim przypadku wysokość stopki zawiera tekst, a liczba linii zależy od szerokości ekranu.

Zamiast tworzyć różne rodzaje zapytań o media i budować trochę pracy, wolałbym czyste rozwiązanie CSS, w którym lepka stopka automatycznie dostosowuje się, gdy zmienia się szerokość ekranu.

Czy ktokolwiek z was ma ostateczną odpowiedź?

Źródło

2013-06-03 Paul van Haren

możliwe duplikat [CSS Sticky stopki z nieznanymi wysokość] (http://stackoverflow.com/questions/4347133/css-sticky-footers-with-unknown-height) – cimmanon

Tak, pytanie jest rodzajem duplikat, ale odpowiedzi nie są zadowalające. Na szczęście wskazał mi inny wpis z ładnymi wskazówkami odpowiadającymi moim potrzebom: http://stackoverflow.com/questions/12605816/sticky-flexible-footers-and-headers-css-working-fine-in-webkit-but- nie-w-gekonie. Dziękuję za rozpatrzenie tego. –

Nie wspomniałeś, że jeden z elementów ma 'overflow: scroll' na tym. – cimmanon

spróbować czegoś takiego:

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

gdzie wysokość lepkiej stopce jest w stosunku do wysokości pojemnika, z procentem:

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

może musisz uporządkować out margines/dopełnienie dla tekstu z zapytaniami o media, ale wymiary stopki będą dynamiczne bez nich.

Źródło

2013-06-03 17:29:05 peterpixels

Witamy w magicznym świecie flexbox! Spróbuj tego ... 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>

Na Uszczelki i marże są po prostu być trochę dość, ale magia dzieje się z display: flex; min-height: 100vh; flex-direction: column; i flex: 1;.

Aby uzyskać więcej informacji i innych przykładów, zobacz http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Od Mozilla ...

CSS3 Flexible Box, lub schematu flexbox, to tryb układ przewidujący rozmieszczenia elementów na stronie tak, że elementy zachowują się przewidywalnie, gdy układ strony musi uwzględniać różne rozmiary ekranu i różne urządzenia wyświetlające. ... Uwaga: Chociaż specyfikacja CSS Flexible Boxes Layout znajduje się na etapie Rekomendacji dla kandydatów, to nie wszystkie przeglądarki ją zaimplementowały.

Źródło

2013-12-06 19:51:49 Luke

Powinna to być odpowiedź nr 1. Przeszukałem dziś tyle postów. Chętnie znalazłem twoje! –

Jak utworzyć lepką stopkę z płynem

Odpowiedz

Powiązane problemy