HTML/CSS: как я могу бесконечно толкать нижний колонтитул вниз?

До сих пор мне удавалось заставить мой нижний колонтитул всегда придерживаться нижней части, однако я изо всех сил пытался заставить контент или изображения на моей веб-странице сдвинуть нижний колонтитул вниз. Я пробовал абсолютные, фиксированные, относительные позиции для нижнего колонтитула, но безрезультатно, поскольку содержимое класса "container2" продолжает идти под нижний колонтитул. Это также не должен быть липкий нижний колонтитул, похожий на навигационную панель, но он должен быть естественным нижним колонтитулом, где он отталкивается от содержимого.

HTML / CSS: https://jsfiddle.net/jof0hzhc/2/

HTML

<!DOCTYPE html>
<html lang="en" class="app">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>ResponsiveNav</title>
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="js/script.js"> </script>

</head>
<body class="bg2">
    <div class="wrapper">
            <header>

                  <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>

                        <div class="logo">
                              ResponsiveNav
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="index.html">Home</a></li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
                                    <li><a href="apps.html" class="activepage">Current page</a></li>
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                              </ul>
                        </div>
                  </nav>

            </header>

            <section class="content">
            <p class="apphead">Heading</p>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <div class="container2">
                <p class="apptext">Sub-heading</p>
                    <div class="games">

                        <img src="images/1.png">
                        <img src="images/2.jpg">
                        <img src="images/3.jpg">
                        <img src="images/4.jpg">
                        <img src="images/5.jpg">
                        <img src="images/6.jpg">
                    </div>

                <br><br><br><br><br><br><br><br>

                </div>


            </section>




      </div>


<footer>
<p class="foot">
        Footer text. <br>
        __________________________________________________________________________________________________ <br> <br>

        <a href="about.html" class="inquiry">About us </a> 

        |

        <a href="contact.html" class="inquiry">Contact us</a> <br>

        __________________________________________________________________________________________________ 
        <section>
            <p class="foot">Social Media</p>
                <span class="social">
                    <a href="" target="_blank"><img src="images/mail.png" alt="Mail" width="50px" height="50px"/></a>
                    <a href="http://www.facebook.com" target="_blank"><img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/></a>
                </span>
        </section>
        <section>
            <h3>All rights reserved<br></h3>
        </section>
</p>

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

CSS

html, body {
      margin: 0;
      padding: 0;
      width: 98%;
      background-color: black;
      min-height: 100%;
}

body {
      font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
      font-weight: lighter;
}

header {
      width: 98%;
      height: 13vh;

}

li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/


footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
    width:100%;
    position:absolute;
    height:300px;
    font-size: 15px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background-color:black;
    border-width: 10px;
    color: white;


}


p {
    color: black;
    position: relative;
    margin: 5px;
    padding: 10px;
}

a { /*General styling for links to other pages or websites*/
    text-decoration:none;
    position:relative;
    font-family: Trebuchet MS, sans-serif;
}

h2 { /*Styling for site title*/
    font-size: 50px;
    text-align:left;
    color:white;
    margin: 20px;
    font-family: courier;
}

h3 {
    font-size:20px;
    padding-left:20px;
    color: white;
}




.content { /*the main container that consists of most of the existing content*/
    margin-top:5px;
    width:100%;
    height: 1400px;
    margin-left: auto;
    margin-right: auto;


}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}


nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
      z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}

nav ul {
      line-height: 60px;
      list-style: none;
      background: black;
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
}

nav.black ul {
      background: orange;
      opacity: 10;
}

nav ul li {
      display: inline-block;
      padding: 16px 40px;;
}

nav ul li a {
      text-decoration: none;
      color: white;
      font-size: 16px;
}

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: orange;
      display: none;
}

.activepage { 
    font-size: 25px;
    color: red;
    text-decoration: underline;
}

.welcome {
    font-family: courier;
}

.inquiry {
    font-size: 17px;
    color: white;
}


.container2 {
    background-color: darkgrey;
    padding: 10px;
    margin: 0;
    width: 97.8%;
    height: 1000px;
    z-index: 0;
    position:absolute;
    overflow:hidden;

}

p.heading {
    font-size: 25px;
    font-weight: bold;
    font-family: courier;
}

.foot {
    color: white;

}

.bg2 {
    background-image:url("hex.jpg");
    height: 550px;
    width: 102%;


}

.apphead {
    color: white;
    font-size: 100px;
    font-family: courier;
}

.apptext {
    color:white;
    font-size: 45px;
    font-weight: bold;
    font-family: courier;

}

.games {
    margin:0;
    position:relative;
    border:solid white; 
}

.games img {
    width: 640px;
    height:250px;
    padding: 5px;
    transition: 1s;

}

.games img:hover {
    transform: scale(1.1);
}

.item img{
    display:block;
}


@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }

      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .menu-icon {
            display: block;
      }

}
Источник

4 ответа

Во-первых, я немного запутался, почему вы используете <br> пометить так много, но похоже, что вы пытаетесь разместить элементы вместе с ними. Вы можете использовать padding или margin для этого.

Наконец, я думаю, что вы ищете position: fixed, Попробуй это:

footer { 
  width:100%;
  position: fixed; /* use fixed instead of absolute */
  bottom: 0; /* set bottom to 0 */
  height:300px;
  font-size: 15px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  background-color:black;
  border-width: 10px;
  color: white;
}
Источник

У вас есть несколько проблем в вашем CSS. Основная проблема, из-за которой ваш контент не появляется, заключается в том, что вы используете overflow: hidden; в container2 а также height: 1000px; из-за этого все, что превышает 1000 пикселей, не будет отображаться. Попробуйте удалить overflow: hidden или же overflow: x-scroll,

Это документация для свойства переполнения, я предлагаю вам прочитать его для лучшего понимания вашей проблемы. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Источник
  1. Вам нужно установить min-height за html, body {min-height: 100vh;}
  2. Задавать footer как position: fixed; bottom: 0; left: 0;

Надеюсь, это поможет вам.

Источник

Есть некоторые вещи, которые вы должны изменить: 1. вы используете абсолютное положение вне относительного 2. использование абсолютных значений для высоты не является хорошей практикой 3. всегда лучше использовать отступы и поля для создания пробела. Сохраняйте фиксированное положение только для навигации по заголовку и закомментируйте все фиксированные значения высоты (px) и абсолютное и относительное позиционирование для начала. Абсолютная позиция должна быть внутри относительной, если нет особой причины не делать этого. Чтобы выйти из основной проблемы, начните с нижнего колонтитула и container2. Но есть еще много чего исправить.

Источник
Другие вопросы по тегам