Некоторые отзывчивые проблемы в CSS

Question

Я создаю сайт, и сейчас я застрял. На данный момент я создаю панель управления сайтом. Он имеет заголовок для кнопок настроек basi c (Домой, Профиль и Выйти). Тело, которое содержит инструменты навигации слева и на главной странице тела, расположенной рядом с ним. И, конечно, нижний колонтитул под ним.

Это должно выглядеть следующим образом:

Это хорошо, но некоторые как, когда я вижу его в использовании " Переключить панель инструментов устройства "под devtools, это выглядит так:

Как я могу решить эту ошибку.

Вот код:

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

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 81px;
}

.leftForm {
  background-color: #2c384a;
  width: 204px;
  float: left;
  height: 100%;
}

.leftForm img,
.leftForm1 img {
  width: 204px;
  height: 204px;
  border-radius: 200px;
}

.name {
  font-size: 26px;
  font-family: calibri;
  color: white;
  margin: 0;
  text-align: center;
}

.pageselector li,
.pageselector1 li {
  width: 150px;
  padding: 10px 0 10px 10px;
  text-align: left;
}

.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
  color: white;
}

.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
  background-color: rgba(0, 0, 0, 0.7);
}

.contentcon {
  width: auto;
  display: inline-block;
}

.announcementSlider {
  background-color: #323f4f;
  border-radius: 10px 10px 3px 3px;
  font-size: 24px;
  margin: 5px 3px 3px 3px;
  height: 400px;
  width: 630px;
  border: 2px solid black;
  color: white;
}

.annocontent {
  color: black;
  height: 360px;
  width: 626px;
  border-radius: 0 0 3px 3px;
  background: #f1f1f1;
}

.buttons-container {
  border-radius: 10px 10px 0 0;
  width: 640px;
}

.button {
  height: auto;
  border-radius: 3px;
  border: 2px solid black;
  margin: 3px 3px;
  width: 153px;
  background: #4091e3;
  float: left;
  color: white;
}

.button-admin {
  height: auto;
  border-radius: 3px;
  border: 2px solid black;
  margin: 3px 3px;
  width: 312px;
  background: #4091e3;
  float: left;
  color: white;
}

.button img,
.button-admin img {
  height: 60px;
  margin: 14px 0;
}

@media screen and (max-width: 980px) {
  .buttons-container {
    width: auto;
    height: auto;
  }
  .announcementSlider {
    width: auto;
  }
  .contentcon {
    padding-left: 0;
  }
  .annocontent {
    width: auto;
  }
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 81px;
  background-color: gray;
  text-align: center;
}

.fa {
  margin: 15px 0;
  padding: 11px;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
}

.fa-twitter {
  background: #55ACEE;
}


}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div id="page-container">
  <div id="content-wrap">
    <header id="header">
      <nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
        Dashboard
        <a href="#" class="sidenav-trigger" data-target="slide_out" style="margin-right: 50px"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down right">
          <li><a href="/Dashboard.php">Home</a></li>
          <li><a href="/profile.php">Profile</a></li>
          <li><a href="/argus/logout.php">Log Out</a></li>
        </ul>
      </nav>
    </header>

    <div style="text-align: center;">
      <div class="leftForm hide-on-med-and-down">
        <?php echo '<img src="picture.php?id=' . $user_check . '">';?>
        <p class="name">Administrator</p>
        <ul class="pageselector right">
          <a href="Dashboard.php">
            <li class="active">Dashboard</li>
          </a>
          <a href="profile.php">
            <li>Profile</li>
          </a>
          <a href="">
            <li>Subject</li>
          </a>
          <a href="">
            <li>Workspace</li>
          </a>
          <a href="">
            <li>Task</li>
          </a>
          <a href="">
            <li>Messages</li>
          </a>
          <a href="logout.php">
            <li>Log Out</li>
          </a>
        </ul>
      </div>

      <div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
        <?php echo '<img src="picture.php?id=' . $user_check . '">';?>
        <p class="name">Administrator</p>
        <ul class="pageselector1 right">
          <a href="Dashboard.php">
            <li class="active1">Dashboard</li>
          </a>
          <a href="profile.php">
            <li>Profile</li>
          </a>
          <a href="">
            <li>Subject</li>
          </a>
          <a href="">
            <li>Workspace</li>
          </a>
          <a href="">
            <li>Task</li>
          </a>
          <a href="">
            <li>Messages</li>
          </a>
          <a href="logout.php">
            <li>Log Out</li>
          </a>
        </ul>
      </div>

      <div class="contentcon">
        <div class="announcementSlider">
          Announcements
          <div class="annocontent"></div>
        </div>
        <div class="buttons-container">
          <a class="button" href=".php">
            <div>
              <img src='pictures/Library.png'>
              <div class="span"><span>Library</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/Workspace.png'>
              <div class="span"><span>Workspace</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/task.png'>
              <div class="span"><span>Task</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/message.png'>
              <div class="span"><span>Message</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/locker.png'>
              <div class="span"><span>Locker</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/teacher.png'>
              <div class="span"><span>Teachers</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/student.png'>
              <div class="span"><span>Students</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/calendar.png'>
              <div class="span"><span>Calendar</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/blogforum.png'>
              <div class="span"><span>Blog/Forum</span></div>
            </div>
          </a>

          <a class="button" href=".php">
            <div>
              <img src='pictures/grades.png'>
              <div class="span"><span>Grades</span></div>
            </div>
          </a>

          <a class="button-admin" href=".php">
            <div>
              <img src='pictures/admin.png'>
              <div class="span"><span>Admin</span></div>
            </div>
          </a>
        </div>
      </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script type="text/javascript">
        const slide_menu = document.querySelectorAll(".sidenav");
        M.Sidenav.init(slide_menu, {});
      </script>
    </div>
  </div>
  <footer id="footer">
    <a href="#" class="fa fa-facebook" style="font-size: 30px"></a>
    <a href="#" class="fa fa-twitter" style="font-size: 30px"></a>
  </footer>
</div>

Answer 1

Другое возможное решение (я изменяю тег php для этого примера, фрагмент кода, похоже, не работает, может быть, wv и wh там не работают, но он работает, если вы пытаетесь напрямую сохранить файл html или попробовать его здесь )

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body,
        html {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        #page-container {
            position: relative;
            min-height: calc(100% - 64px);
			display: flex;
        }
        
        #content-wrap {
            padding-bottom: 81px;
        }
        
        .leftForm {
            background-color: #2c384a;
            width: 204px;
            float: left;
            height: 100%;
        }
        
        .leftForm img,
        .leftForm1 img {
            width: 204px;
            height: 204px;
            border-radius: 200px;
        }
        
        .name {
            font-size: 26px;
            font-family: calibri;
            color: white;
            margin: 0;
            text-align: center;
        }
        
        .pageselector li,
        .pageselector1 li {
            width: 150px;
            padding: 10px 0 10px 10px;
            text-align: left;
        }
        
        .pageselector a,
        .pageselector1 a,
        .fa-facebook,
        .fa-twitter {
            color: white;
        }
        
        .pageselector li:hover,
        .active,
        .pageselector1 li:hover,
        .active1 {
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        .contentcon {
            width: auto;
            display: inline-block;
        }
        
        .announcementSlider {
            background-color: #323f4f;
            border-radius: 10px 10px 3px 3px;
            font-size: 24px;
            margin: 5px 3px 3px 3px;
            height: 400px;
            width: 630px;
            border: 2px solid black;
            color: white;
        }
        
        .annocontent {
            color: black;
            height: 360px;
            width: 626px;
            border-radius: 0 0 3px 3px;
            background: #f1f1f1;
        }
        
        .buttons-container {
            border-radius: 10px 10px 0 0;
            width: 640px;
        }
        
        .button {
            height: auto;
            border-radius: 3px;
            border: 2px solid black;
            margin: 3px 3px;
            width: 153px;
            background: #4091e3;
            float: left;
            color: white;
        }
        
        .button-admin {
            height: auto;
            border-radius: 3px;
            border: 2px solid black;
            margin: 3px 3px;
            width: 312px;
            background: #4091e3;
            float: left;
            color: white;
        }
        
        .button img,
        .button-admin img {
            height: 60px;
            margin: 14px 0;
        }
        
        @media screen and (max-width: 980px) {
            .buttons-container {
                width: auto;
                height: auto;
            }
            .announcementSlider {
                width: auto;
            }
            .contentcon {
                padding-left: 0;
            }
            .annocontent {
                width: auto;
            }
        }
        
        #footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 81px;
            background-color: gray;
            text-align: center;
        }
        
        .fa {
            margin: 15px 0;
            padding: 11px;
            width: 50px;
            height: 50px;
            text-decoration: none;
        }
        
        .fa:hover {
            opacity: 0.7;
        }
        
        .fa-facebook {
            background: #3B5998;
        }
        
        .fa-twitter {
            background: #55ACEE;
        }
    }
    </style>
</head>

<body>
    <header id="header">
        <nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
            Dashboard
            <a href="#" class="sidenav-trigger" data-target="slide_out" style="margin-right: 50px"><i class="material-icons">menu</i></a>
            <ul class="hide-on-med-and-down right">
                <li><a href="/Dashboard.php">Home</a></li>
                <li><a href="/profile.php">Profile</a></li>
                <li><a href="/argus/logout.php">Log Out</a></li>
            </ul>
        </nav>
    </header>
    <div id="page-container">
        <div id="content-wrap">

            <div style="text-align: center; width: 100vw;">
                <div class="leftForm hide-on-med-and-down">
                    <img src="picture.php?id=">
                    <p class="name">Administrator</p>
                    <ul class="pageselector right">
                        <a href="Dashboard.php">
                            <li class="active">Dashboard</li>
                        </a>
                        <a href="profile.php">
                            <li>Profile</li>
                        </a>
                        <a href="">
                            <li>Subject</li>
                        </a>
                        <a href="">
                            <li>Workspace</li>
                        </a>
                        <a href="">
                            <li>Task</li>
                        </a>
                        <a href="">
                            <li>Messages</li>
                        </a>
                        <a href="logout.php">
                            <li>Log Out</li>
                        </a>
                    </ul>
                </div>

                <div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
                    <img src="picture.php?id=">
                    <p class="name">Administrator</p>
                    <ul class="pageselector1 right">
                        <a href="Dashboard.php">
                            <li class="active1">Dashboard</li>
                        </a>
                        <a href="profile.php">
                            <li>Profile</li>
                        </a>
                        <a href="">
                            <li>Subject</li>
                        </a>
                        <a href="">
                            <li>Workspace</li>
                        </a>
                        <a href="">
                            <li>Task</li>
                        </a>
                        <a href="">
                            <li>Messages</li>
                        </a>
                        <a href="logout.php">
                            <li>Log Out</li>
                        </a>
                    </ul>
                </div>

                <div class="contentcon">
                    <div class="announcementSlider">
                        Announcements
                        <div class="annocontent"></div>
                    </div>
                    <div class="buttons-container">
                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/Library.png'>
                                <div class="span"><span>Library</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/Workspace.png'>
                                <div class="span"><span>Workspace</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/task.png'>
                                <div class="span"><span>Task</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/message.png'>
                                <div class="span"><span>Message</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/locker.png'>
                                <div class="span"><span>Locker</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/teacher.png'>
                                <div class="span"><span>Teachers</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/student.png'>
                                <div class="span"><span>Students</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/calendar.png'>
                                <div class="span"><span>Calendar</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/blogforum.png'>
                                <div class="span"><span>Blog/Forum</span></div>
                            </div>
                        </a>

                        <a class="button" href=".php">
                            <div>
                                <img src='pictures/grades.png'>
                                <div class="span"><span>Grades</span></div>
                            </div>
                        </a>

                        <a class="button-admin" href=".php">
                            <div>
                                <img src='pictures/admin.png'>
                                <div class="span"><span>Admin</span></div>
                            </div>
                        </a>
                    </div>
                </div>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
                <script type="text/javascript">
                    const slide_menu = document.querySelectorAll(".sidenav");
                    M.Sidenav.init(slide_menu, {});
                </script>
            </div>
        </div>
        <footer id="footer">
            <a href="#" class="fa fa-facebook" style="font-size: 30px"></a>
            <a href="#" class="fa fa-twitter" style="font-size: 30px"></a>
        </footer>
    </div>
</body>

Answer 2

это проблема, которую можно решить разными способами. На мой взгляд, лучший способ решения проблем нижнего колонтитула (и заголовка) заключается в следующем: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

решение:

установите фиксированную высоту вашего footer{ height: 10px} и установите body{ margin-bottom: 10px}

ОБНОВЛЕНИЕ НА ОСНОВЕ КОММЕНТАРИЙ

Я не могу увидеть, работает ли это, поскольку я не могу воссоздать код в моей среде.

CSS

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


body {
  margin-bottom: 81px;
  position: relative;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 81px;
}

.leftForm {
  background-color: #2c384a;
  width: 204px;
  float: left;
  height: 100%;
}

.leftForm img,
.leftForm1 img {
  width: 204px;
  height: 204px;
  border-radius: 200px;
}

.name {
  font-size: 26px;
  font-family: calibri;
  color: white;
  margin: 0;
  text-align: center;
}

.pageselector li,
.pageselector1 li {
  width: 150px;
  padding: 10px 0 10px 10px;
  text-align: left;
}

.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
  color: white;
}

.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
  background-color: rgba(0, 0, 0, 0.7);
}

.contentcon {
  width: auto;
  display: inline-block;
}

.announcementSlider {
  background-color: #323f4f;
  border-radius: 10px 10px 3px 3px;
  font-size: 24px;
  margin: 5px 3px 3px 3px;
  height: 400px;
  width: 630px;
  border: 2px solid black;
  color: white;
}

.annocontent {
  color: black;
  height: 360px;
  width: 626px;
  border-radius: 0 0 3px 3px;
  background: #f1f1f1;
}

.buttons-container {
  border-radius: 10px 10px 0 0;
  width: 640px;
}

.button {
  height: auto;
  border-radius: 3px;
  border: 2px solid black;
  margin: 3px 3px;
  width: 153px;
  background: #4091e3;
  float: left;
  color: white;
}

.button-admin {
  height: auto;
  border-radius: 3px;
  border: 2px solid black;
  margin: 3px 3px;
  width: 312px;
  background: #4091e3;
  float: left;
  color: white;
}

.button img,
.button-admin img {
  height: 60px;
  margin: 14px 0;
}

@media screen and (max-width: 980px) {
  .buttons-container {
    width: auto;
    height: auto;
  }
  .announcementSlider {
    width: auto;
  }
  .contentcon {
    padding-left: 0;
  }
  .annocontent {
    width: auto;
  }
}

#footer {

  position: relative;
  bottom: 0;
  width: 100%;
  height: 81px;
  background-color: gray;
  text-align: center;
}

.fa {
  margin: 15px 0;
  padding: 11px;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
}

.fa-twitter {
  background: #55ACEE;
}


}