发表新帖
发表新帖

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

前端 未结
关注
29 2483
悲哀的现实
悲哀的现实 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-21 23:59

    ONE line solution using Bootstrap

    Apart from all the CSS and jQuery solutions provided,
    I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between

    • This DOES NOT require knowing the height of the footer ahead of time.
    • This DOES NOT require setting position absolute.
    • This WORKS with dynamic divs that overflow on smaller screens.

    html, body {
  height: 100%;
}
    <html>

    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body class="d-flex flex-column justify-content-between text-white text-center">

        <header class="p-5 bg-dark">
          <h1>Header</h1>
        </header>
        <main class="p-5 bg-primary">
          <h1>Main</h1>
        </main>
        <footer class="p-5 bg-warning">
          <h1>Footer</h1>
        </footer>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>

</html>

    0 讨论(0)
  • 醉梦人生
    2020-11-22 00:01 
    footer {
  margin-top:calc(5% + 60px);
}

    This works fine

    0 讨论(0)
  • 梦谈多话
    2020-11-22 00:01 
    <!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
    0 讨论(0)
  • 时光说笑
    2020-11-22 00:02

    here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

    So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.

    We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.

    The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).

    Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.

    I hope i made a lot clear for you guys.

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

    A very simple approach which works great cross browser is this:

    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
    <div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

    0 讨论(0)
  • 名媛妹妹
    2020-11-22 00:03

    From IE7 onwards you can simply use

    #footer {
    position:fixed;
    bottom:0;
}

    See caniuse for support.

    0 讨论(0)
 看不清?
提交回复
热议问题