Нижний колонтитул находится прямо под содержимым

#html #css #frontend

Вопрос:

У меня есть довольно простая html-страница, которую мне нужно настроить. Я черпал вдохновение из этого шаблона и редактировал его, пока он не начал соответствовать моим требованиям, и теперь у меня есть следующий html:

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">

  <link rel="stylesheet" href="askStyles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>    

  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Watts social</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">Weekly usage</a></p>
      </div>

      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Did you save some cash? Buy a tree!
      </div>
      <table>
  
        <td>spent this week</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Saved</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Yearly spending</td>
        <td>20000</td>
      </tr>
    </table>
    </div>
    <div class="col-sm-7">
    
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <form action="/action_page.php">
                <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                  <br><br>
                  <input type="submit" value="Submit">
                </form>
              
              </button>     
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well yellow">
           <p>Christian Hvidekjær</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 200</span>
              <span class="label label-primary">Total KWH</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well green">
           <p>Frederik Weis Holst</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well red" >
           <p>Carla Sørensen</p>
          </div>
        </div>
        <div class="col-sm-9" >
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>

</html>

Я также добавил свой собственный небольшой css-файл, просто для дополнения:

   #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;            /* Footer height */
    margin-top: 19px;
  }
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

  .mytags {
    display:inline-block;
 }

 .red {
  background-color: #e21313;
}

.yellow {
background-color: #eaee19;
}

.green {
background-color: #0beb16;
}

.neutral {
  background-color:#f5f5f5;
}

На исходной странице (из we3schools) есть нижний колонтитул, который достигает обоих углов экрана, но по какой-то причине в моем случае это всего лишь небольшой текст внизу, плавающий справа от моего другого содержимого:

Это довольно странно для меня, и я не могу понять, какие изменения, которые я внес, могли бы привести к этому. При этом нижний колонтитул в «старом» коде также плавающий и не закреплен внизу, как мне бы хотелось.

Итак, есть две вещи, с которыми у меня возникли проблемы:

чтобы мой нижний колонтитул достигал обеих сторон экрана в виде блока
Закрепив его на дне.

Что я пробовал

Я попытался следовать этой статье, удалив свой уже существующий класс нижнего колонтитула и создав этот:

       #footer {
    position: fixed;
    padding: 10px 10px 0px 10px;
    bottom: 0;
    width: 100%;
    /* Height of the footer*/ 
    height: 40px;
    background: grey;
  }

Однако это не сработало.
Эта и куча других статей на самом деле не сделали своего дела.

Любая помощь была бы мне очень признательна

Редактировать

незакрытые теги теперь исправлены, тх. Я также обновил код. Проблема все еще сохраняется

ПРАВКА 2

спасибо за очень хорошие материалы, которые помогли мне снова удалить нижний колонтитул. Но все равно он плавает в середине экрана, мне также нужно будет его починить

1. Некоторые теги в ваших html-файлах закрыты неправильно, в вашем css, который вы используете #footer , где # указывается идентификатор, а не элемент, также проверьте классы контейнеров начальной загрузки и то, как это влияет на ширину элементов

2. С этого момента у вас должно быть меньше проблем с достижением ожидаемого поведения. удачи!

Ответ №1:

Это происходит из-за стиля

 body{
  display: flex;
}

Но это может быть не одной из причин.
Это деформирует стили начальной загрузки и изменяет внешний вид нижнего колонтитула

Кроме того, если вы добавляете стили для нижнего колонтитула id#, вам следует добавить его в свой html-код

Ответ №2:

У вас было много незакрытых тегов…тебе следует быть осторожнее.

Измените html следующим образом

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="askStyles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>    

  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Watts social</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">Weekly usage</a></p>
      </div>

      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Did you save some cash? Buy a tree!
      </div>
      <p><a href="#">KWH price monthly: 500 dkkr </a></p>
      <p><a href="#">Total KWH </a></p>
      <p><a href="#">Click here to view good tips</a></p>
    </div>
    <div class="col-sm-7">
    
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <form action="/action_page.php">
                <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                  <br><br>
                  <input type="submit" value="Submit">
                </form>
              
              </button>     
            </div>
          </div>
        </div>
      </div>      
      </div>
      </div>

      
      <div class="row">
        <div class="col-sm-3">
          <div class="well yellow">
           <p>Christian Hvidekjær</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 200</span>
              <span class="label label-primary">Total KWH</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well green">
           <p>Frederik Weis Holst</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well red" >
           <p>Carla Sørensen</p>
          </div>
        </div>
        <div class="col-sm-9" >
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>

      </div>
<footer>
<div class="container-fluid text-center">
  <p>Footer Text</p>
</div>

</footer>

<style>
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

  .mytags {
    display:inline-block;
 }

 .red {
  background-color: #e21313;
}

.yellow {
background-color: #eaee19;
}

.green {
background-color: #0beb16;
}

.neutral {
  background-color:#f5f5f5;
}
footer {background-color:gray}</style>
</body>


</html>

Ответ №3:

У вас были некоторые ошибки в вашем html. Например, ваш footer был за пределами body , а некоторые div теги вообще не закрыты. Я их починил. А также добавил эти строки для вашей цели.

 footer {
    /* get all available space */
    width: 100%;

    /* see visual change */
    color: white;
    background-color: gray;

    /* for better aligning */
    padding: 1em 0;
}

Смотрите полный пример здесь.

 #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
    margin-top: 19px;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mytags {
    display: inline-block;
}

.red {
    background-color: #e21313;
}

.yellow {
    background-color: #eaee19;
}

.green {
    background-color: #0beb16;
}

.neutral {
    background-color: #f5f5f5;
}

footer {
    /* get all available space */
    width: 100%;

    /* see visual change */
    color: white;
    background-color: gray;

    /* for better aligning */
    padding: 1em 0;
}

 <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="askStyles.css">
    <link rel="stylesheet" href="style/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>

    </style>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Watts social</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Messages</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container text-center">
        <div class="row">
            <div class="col-sm-3 well">
                <div class="well">
                    <p><a href="#">Weekly usage</a></p>
                </div>

                <div class="alert alert-success fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                    Did you save some cash? Buy a tree!
                </div>
                <p><a href="#">KWH price monthly: 500 dkkr </a></p>
                <p><a href="#">Total KWH </a></p>
                <p><a href="#">Click here to view good tips</a></p>
            </div>
            <div class="col-sm-7">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default text-left">
                            <div class="panel-body">
                                <form action="/action_page.php">
                                    <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                                    <br><br>
                                    <input type="submit" value="Submit">
                                </form>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="well yellow">
                            <p>Christian Hvidekjær</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 200</span>
                                <span class="label label-primary">Total KWH</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="well green">
                            <p>Frederik Weis Holst</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 100</span>
                                <span class="label label-primary">Total KWH: 200</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="well red">
                            <p>Carla Sørensen</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 100</span>
                                <span class="label label-primary">Total KWH: 200</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="container-fluid text-center">
        <p>Footer Text</p>
    </footer>
</body>

</html>

Ответ №4:

У вас здесь произошло несколько событий, я постараюсь перечислить их для вас:

В ВАШЕМ HTML-КОДЕ

Много незакрытых тегов, это приводило к тому, что ваш footer элемент содержался в нескольких div тегах
У вас все еще есть закрывающий тег кнопки, но нет связанного открывающего тега (это в строке 68. Я не был уверен, чего ты здесь хочешь, поэтому оставил все как есть.

В ВАШЕМ CSS-КОДЕ

Вы упомянули #footer . # Обозначает идентификатор, в то время как на элемент нижнего колонтитула можно просто ссылаться как footer . Хэштег не нужен.
Если вы используете position: absolute; bottom: 0; нижний колонтитул, он загрузится в нижней части экрана и будет прокручиваться вместе с вашим контентом по мере перемещения по странице. Удаление этих тегов исправляет это. Также ненужно, поскольку ваши footer элементы находятся вне body элемента.

Я думаю, что это все. Было бы целесообразно просмотреть и сравнить с вашим исходным кодом, чтобы увидеть, где я немного почистил вещи и что изменилось, так как я, возможно, что-то пропустил (извиняюсь, если это так).

Вот обновленный HTML и CSS!

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="askStyles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>    

  </style>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Watts social</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">Weekly usage</a></p>
      </div>

      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Did you save some cash? Buy a tree!
      </div>
      <p><a href="#">KWH price monthly: 500 dkkr </a></p>
      <p><a href="#">Total KWH </a></p>
      <p><a href="#">Click here to view good tips</a></p>
    </div>
    
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <form action="/action_page.php">
                <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                  <br><br>
                  <input type="submit" value="Submit">
              </form>
              
              </button>     
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well yellow">
           <p>Christian Hvidekjær</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 200</span>
              <span class="label label-primary">Total KWH</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>

        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well green">
           <p>Frederik Weis Holst</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well red" >
           <p>Carla Sørensen</p>
          </div>
        </div>
        <div class="col-sm-9" >
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</html>

CSS

 @charset "UTF-8";
/* CSS Document */

footer {
    width: 100%;
    height: 2.5rem;            /* Footer height */
    margin-top: 19px;
}

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

.mytags {
    display:inline-block;
 }

.red {
  background-color: #e21313;
}

.yellow {
background-color: #eaee19;
}

.green {
background-color: #0beb16;
}

.neutral {
  background-color:#f5f5f5;
}