Question 41126 in PHP Question posted in
Official manual can be found here.

Display footer at bottom of a page with dynamic and absolute? – PHP

I have this CSS, where I want the footer div displayed after all content on the page. At this moment it doesnt show on the page, when I have the height of the page set to "auto", but if I set a height of any sorts or min-height it shows up till that height as it should. Can I do this, or do I have to set a manual height on each page? The CSS looks like this:

body 
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    background-image: url("background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Dette er css til vores footer div boks */
div.footer 
{
    position: absolute;
    bottom: 0;
    height: 250px;
    left: 0;
    right: 0;
    padding: 1%;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    line-height: 200%;
    border: 1px solid black;
}

I have tried using flexbox, containers and grids, but it only seems to work, if I insert a manual height of the body.

Tags:

3

Answers


  1. 0

    Try this example:
    .my-contnet element has min-height of 100% to take the full height of the page.

    This way the footer is always displayed at the bottom of the page regardless of the amount of content on the page.

    The content will fill the remaining space above the footer.

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

.my-contnet {
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
    Login or Signup to reply.
  2. 0

    What about this?

    div.header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: normal;
}
video.header {
    position: relative;
    width: 100%;
    filter: brightness(60%);
    left: 50%;
    top: 50%;
    transform: translate(-50%,0%);
}
div.headline {
    position: absolute;
    left: 50%;
    border-radius: 50px;
    transform: translate(-50%,150%);
}
h1.headline {
    font-size: 500%;
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}
div.about {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    border: solid black 2px;
    border-radius: 40px;
    padding: 2%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 280px;
}
table.text {
    width: 60%;
    padding-bottom: 1%;
}
table.img {
    padding-top: 5%;
}
div.footer {
    position:fixed;
}

    The absolute positioning of your elements was causing the footer visibility problems.

    Also, if you don’t want the footer to be displayed at all times, just replace the fixed position in my example with relative – the footer will only be showing once your visitors scroll down to it. If you do that, however, be sure to remove the margin-bottom: 280px; rule from div.about selector.

    Please note that these were just some quick fixes – I have not considered whether your site will look good (enough) on various resolutions (mobile, tablets, 4:3, etc).

    You might want to look up some boilerplates, for example, the ones Bootstrap offers.

    Login or Signup to reply.
  3. 0

    For me, this code works great.
    Please pay attention to the link I sent you in the comments.

    <!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            /* IE 10-11 didn't like using min-height */
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        .content {
            flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
            padding: 20px;
            background-color: lightblue;
        }
        .footer {
            flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
            padding: 20px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="content">
        <h1>Sticky Footer with Flexbox</h1>
    </div>

    <footer class="footer">
        Footer 
    </footer>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search