All geek questions in one place

How to attach footer to footer (not fixed) even when scrolling

I am learning web development, and I just can’t understand what I am doing wrong in this. I want the footer of this page to stay below, under all content, but not be fixed on the screen. The problem is that when the body has a height of more than 100%, the footer remains in the middle of the screen, not at the bottom.

I saw a lot of tutorials on how to achieve this using "position: absolute" + "bottom: 0" and stuff, but it all failed.

Check this:

<html>
<head>
    <meta charset="iso-8859-1" />               
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
    <title>Matheus Page</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="title-div">
                <h1>Title</h1>
            </div>

            <nav>
                <ul>
                    <li><h3>Home</h3></li>
                    <li><h3>Articles</h3></li>
                    <li><h3>Perfil</h3></li>
                    <li><h3>Settings</h3></li>
                </ul>
            </nav>
        </header>
        <div id="body">
            <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    <div>
</body>

CSS:

body {
    font-family: 'Arvo', serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
   min-height:100%;
}

header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}

.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}

#body {
   padding:10px;
   padding-top:8%;
   padding-bottom:15%;   /* Height of the footer */
}

footer {
    position: absolute;
    width: 100%;
    height: 15%;
    right: 0;
    bottom: 0;
    left: 0;
    color: #FFD740; 
    background-color: #424242;
    clear: both;
}

link to the print result screen

This is my first web page, and again, I searched the Internet and found many solutions, but could not get it to work. Also, sorry for my English, this is not my native language.

+15
6

, .

, , .

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}
<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->
Hide result

, "padding-bottom" #content #footer.

Update:

JSFiddle Demo, .

+17

, Flexbox. min-height: 100vh min-height: 100vh - margin-top: auto .

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
    background-color: #CCCCFF;
    margin-top: auto;
}
<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>
Hide result
+2

,

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

-

0

, @divy3993, , . , . ,

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}
0

: 0 0, - , . : 100% :

body{
height: 100%;
width: 100%;
position: relative;

}

footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
0

, .

min-height div "body" , #body , , .

divs:  - div , div div .

, , %, , .

-1

Source: https://habr.com/ru/post/1624314/

More articles:


All Articles