Przypnij stopkę do dołu strony

Dla Twojej

stopki

:

#footer {

 position: fixed;

 height: 50px;

 background-color: red;

 bottom: 0px;

 left: 0px;

 right: 0px;

 margin-bottom: 0px;

}

W przypadku Twojego

body

:

body {

 margin-bottom:50px;

}

<div class="snippet-code snippet-currently-hidden">
<div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

#footer {

 background-color: red;

 position: fixed;

 bottom: 0px;

 left: 0px;

 right: 0px;

 height: 50px;

 margin-bottom: 0px;

}div {

 margin: 20px 20px;

}body {

 margin-bottom: 50px;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<div>

 Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:

 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright

 bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the

 bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally

 pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts

 at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always

 fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using

 some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and

 see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.

 I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for

 the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site

 have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc.

 Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside

 of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most

 people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's

 container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people

 can have a look at it right now and see what the current code is to amend.<div id="footer">

 This is footer

jsFiddle demo
http://jsfiddle.net/girishgowdayt/RUDWS/
-wersja

Możemy użyć

FlexBox

do lepkiego dna

stopka

i

nagłówek

bez używania POSITIONS w CSS.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

.container {

 display: flex;

 flex-direction: column;

 height: 100vh;

}header {

 height: 50px;

 flex-shrink: 0;

 background-color: #037cf5;

}footer {

 height: 50px;

 flex-shrink: 0;

 background-color: #134c7d;

}main {

 flex: 1 0 auto;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<div class="container">

 <header>HEADER</header>

 <main class="content"> </main>

 <footer>FOOTER</footer>

DEMO - JSFiddle


Uwaga
: Sprawdź obsługę przeglądarki FlexBox.

caniuse
https://caniuse.com/#feat=flexbox

Na przykład dodaj

position: fixed;

i

bottom: 0;

poniżej selektora

#footer

:

demonstracja

http://jsfiddle.net/vHNyb/

CSS

#footer {

 background-color: #F3F3F3;

 padding-top: 10px;

 padding-bottom: 0px;

 position:fixed;

 bottom:0;

 width:100%;

}

Zestaw

html, body {

 height: 100%;

}

Zawiń całą zawartość przed stopką w element div.

.wrapper {

 height:auto !important;

 min-height:100%;

}

Możesz dostosować minimalną wysokość, jak chcesz, w zależności od tego, która część stopki ma być wyświetlana u dołu okna przeglądarki. Jeśli ustawisz ją na 90%, 10% stopki, zostanie wyświetlona przed przewijaniem.

Oto proste rozwiązanie CSS, które zadziała:

#fix-footer{

 position: fixed;

 left: 0px;

 bottom: 0px;

 height: 35px;

 width: 100%;

 background: #1abc9c;

}

CSS

html {

 height:100%;

}

body {

 min-height:100%; position:relative;

}.footer {

 background-color: rgb(200,200,200);

 height: 115px;

 position:absolute; bottom:0px;

}.footer-ghost { height:115px; }

HTML

<div class="header">...

<div class="content">...

<div class="footer">

<div class="footer-ghost">

Uważam, że rozwiązanie lepkiej stopki jest trochę bolesne w responsywnych witrynach, biorąc pod uwagę, że wysokość nawigacji i stopki mogą się różnić w zależności od urządzenia. Jeśli zależy Ci tylko na pracy w nowoczesnych przeglądarkach, możesz osiągnąć swój cel za pomocą niewielkiego JavaScript.
Jeśli to jest Twój kod HTML:

<div class="nav"><div class="wrapper"><div class="footer">

Następnie użyj tego JQuery na każdej stronie:

$(function(){/* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */

 function setWrapperMinHeight() {

 $('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());

 }

/* Make sure the main div gets resized on ready */

 setWrapperMinHeight();/* Make sure the wrapper div gets resized whenever the screen gets resized */

 window.onresize = function() {

 setWrapperMinHeight();

 }

});

Twój element stopki z natury nie będzie zadokowany na dole rzutni, chyba że nadasz mu taki styl.

Więc jeśli masz stronę, która nie ma wystarczającej ilości treści, aby ją wypchnąć do końca, skończy się gdzieś pośrodku widocznego obszaru; wygląda bardzo niezręcznie i nie wie, co ze sobą zrobić, jak mój pierwszy dzień w liceum.
Pozycjonowanie elementu poprzez zadeklarowanie reguły

fixed

jest świetne, jeśli zawsze chcesz, aby stopka była widoczna niezależnie od początkowej wysokości strony, ale pamiętaj, aby ustawić stopkę tak, aby nie nakładała się na ostatni bit treść na tej stronie. Staje się to trudne, jeśli stopka ma dynamiczne wysokości; co często ma miejsce w przypadku witryn responsywnych, ponieważ leży to w naturze elementów do układania.
Podobny problem z pozycjonowaniem występuje w przypadku

bezwzględnego

. I chociaż usuwa dany element z naturalnego przepływu dokumentu, nadal nie przypina go do dołu ekranu, jeśli okaże się, że masz stronę z niewielką lub żadną treścią do ukształtowania.

Rozważ osiągnięcie tego do

:

• Deklarowanie wartości wysokości dla tagów

  & < body & >

  & amp;

  & < html & >

• Deklarowanie wartości

  minimal-height

  do zagnieżdżonego elementu opakowania, zwykle elementu, który otacza wszystkie elementy podrzędne zawarte w strukturze ciała (nie będzie to obejmować elementu

  footer

  )

Przykład pióra kodu
http://codepen.io/anon/pen/wWwqqB
<div class="snippet-code snippet-currently-hidden">
<div class="snippet" data-console="true" data-hide="true" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

$("#addBodyContent").on("click", function() {

 $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").appendTo(".flex-col:first-of-type");

});$("#resetBodyContent").on("click", function() {

 $(".flex-col p").remove();

});$("#addFooterContent").on("click", function() {

 $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").appendTo("footer");

});$("#resetFooterContent").on("click", function() {

 $("footer p").remove();

});

<pre class="snippet-code-css lang-css prettyprint-override">

html, body {

 height: 91%;

}.wrapper {

 width: 100%;

 left: 0;

 right: 0;

 box-sizing: border-box;

 padding: 10px;

 display: block;

 min-height: 100%;

}footer {

 background: black;

 text-align: center;

 color: white;

 box-sizing: border-box;

 padding: 10px;

}.flex {

 display: flex;

 height: 100%;

}.flex-col {

 flex: 1 1;

 background: #ccc;

 margin: 0px 10px;

 box-sizing: border-box;

 padding: 20px;

}.flex-btn-wrapper {

 display: flex;

 justify-content: center;

 flex-direction: row;

}.btn {

 box-sizing: border-box;

 padding: 10px;

 transition: .7s;

 margin: 10px 10px;

 min-width: 200px;

}.btn:hover {

 background: transparent;

 cursor: pointer;

}.dark {

 background: black;

 color: white;

 border: 3px solid black;

}.light {

 background: white;

 border: 3px solid white;

}.light:hover {

 color: white;

}.dark:hover {

 color: black;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<div class="wrapper">

 <div class="flex-btn-wrapper">

 <button id="addBodyContent" class="dark btn">Add Content</button>

 <button id="resetBodyContent" class="dark btn">Reset Content</button>

 

 <div class="flex">

 <div class="flex-col">

 lorem ipsum dolor...

 

 <div class="flex-col">

 lorem ipsum dolor...

 

 

 

<footer>

 <div class="flex-btn-wrapper">

 <button id="addFooterContent" class="light btn">Add Content</button>

 <button id="resetFooterContent" class="light btn">Reset Content</button>

 

 lorem ipsum dolor...

</footer>

Stopka powinna znajdować się na dole strony, ale nie

naprawić

.

CSS

html {

 height: 100%;

}body {

 position: relative;

 margin: 0;

 min-height: 100%; 

 padding: 0;

}

#header {

 background: #595959;

 height: 90px;

}

#footer {

 position: absolute;

 bottom: 0;

 width: 100%;

 height: 90px;

 background-color: #595959;

}

HTML

<html>

 <head></head>

 <body> 

 <div id="header">

 <div id="content">

 <div id="footer"> 

 </body>

</html>

Bardzo prosty przykład pokazujący, jak naprawić stopkę u dołu układu aplikacji.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

/* Styles go here */

html{ height: 100%;}

body{ min-height: 100%; background: #fff;}.page-layout{ border: none; width: 100%; height: 100vh; }.page-layout td{ vertical-align: top; }.page-layout .header{ background: #aaa; }.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }.page-layout .main-content .container{ text-align: center; padding-top: 50px; }.page-layout .footer{ background: #333; color: #fff; }

<pre class="snippet-code-html lang-html prettyprint-override">

<!DOCTYPE html>

<html> <head>

 <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

 <link rel="stylesheet" href="style.css"/>

 <script src="script.js"></script>

 </head> <body>

 <table class="page-layout">

 <tr>

 <td class="header">

 <div>

 This is the site header.

 

 </td>

 </tr>

 <tr>

 <td class="main-content">

 <div>

 [b]Fix footer always to the bottom[/b]>

 <div>

 This is how you can simply fix the footer to the bottom.

 

 <div>

 The footer will always stick to the bottom until the main-content doesn't grow till footer.

 

 <div>

 Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.

 

 

 </td>

 </tr>

 <tr>

 <td class="footer">

 <div>

 This is the site footer.

 

 </td>

 </tr>

 </table>

 </body></html>

możesz użyć

układ siatki
... Jest nowszy niż Flexbox i ma mniejszą obsługę przeglądarki.
Sprawdź to:

HTML

<body>

 <div class="content">

 content

 

 <footer class="footer"></footer>

</body>

CSS

html {

 height: 100%;

}body {

 min-height: 100%;

 display: grid;

 grid-template-rows: 1fr auto;

} .footer {

 grid-row-start: 2;

 grid-row-end: 3;

}

Przydatne linki

:
Obsługa przeglądarek:

Czy mogę użyć układu siatki
https://caniuse.com/#feat=css-grid
Kompletny przewodnik:

Grid Laoyut Guid
https://css-tricks.com/snippet ... grid/

Moja decyzja:

html, body {

 min-height: 100%

}body {

 padding-bottom: 88px;

}footer {

 position: absolute;

 bottom: 0;

 width: 100%;

 height: 88px;

}

Używając Flex i Bootstrap4 (jeśli nie używasz Bootstrap4, możesz osiągnąć ten sam rezultat używając właściwości flex)

<body class="d-flex flex-column">

 <div>Header

 <div>Main container

 <div class="mt-auto">Footer

</body>