发表新帖
发表新帖

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

前端 未结
关注
29 2485
悲哀的现实
悲哀的现实 2020-11-21 23:48

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can\'t make sit at the bottom of the page.

I wa

相关标签:
29条回答
  • 情话喂你
    2020-11-22 00:06

    Below are 4 different methods of mine:

    In each example the texts are freely-editable to illustrate how the content would render in different scenarios.

    1) Flexbox

    body{ height:100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
    <body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

    2) Grid

    body{ 
  min-height: 100vh; 
  margin: 0; 
  
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header{ 
  min-height:50px;
  background:lightcyan; 
}

footer{ 
  min-height:50px; 
  background:PapayaWhip; 
}
    <body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

    This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)

    3) position:absolute (no dynamic footer height)

    body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
    <body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

    4) Table-layout

    html{ height:100%; }
body { min-height:100%;  margin:0; }

header {
  height: 50px;
  background: lightcyan;
}

article { 
  height: 1%;
}

footer {
  height: 50px;
  background: PapayaWhip;
}

/**** Trick: ****/

body {
  display: table;
  width: 100%; 
}

body > footer {
   display: table-row;
}
    <body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

    0 讨论(0)
  • 我在风中等你
    2020-11-22 00:06

    This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

    * {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
    <html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

    Source for this code

    0 讨论(0)
  • 长情又很酷
    2020-11-22 00:07

    I've used this to stick my footer to the bottom and it worked for me:

    HTML

    <body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

    That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.

    CSS

    .allButFooter {
    min-height: calc(100vh - 40px);
}

    The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.

    That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.

    Working with responsive design

    Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:

    .allButFooter {
    min-height: calc(100vh - 95px); 
}

    This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.

    I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.

    0 讨论(0)
  • 南方客
    2020-11-22 00:10

    Yet, another really simple solution is this one:

    html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

    jsFiddle

    The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

    Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.

    0 讨论(0)
  • 故里飘歌
    2020-11-22 00:11

    I just answered as similar question in here:

    Position footer at bottom of page having fixed header

    I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because the footer of my web app has a dynamic height, I ended up using FlexBox and a spacer.

    1. Start by setting the height for your html and body
    html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

    I'm assuming a column behavior for our app, in the case you need to add a header, hero or any content vertically aligned.

    1. Create the spacer class
    .spacer {
    flex: 1; 
}
    1. So later on your HTML could be something like 
    <html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

    You can play with it here https://codepen.io/anon/pen/xmGZQL

    0 讨论(0)
  • 刺人心
    2020-11-22 00:12

    You can do this

    .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
    0 讨论(0)
 看不清?
提交回复
热议问题