Display footer at bottom of a page with dynamic and absolute?-CodePudding

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.

CodePudding user response：

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%;
}

CodePudding user response：

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.