Блог

Главная - Вопросы по программированию - проблема в том, что нижний колонтитул находится в середине гибких элементов и не устанавливается внизу

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

#html #css #flexbox #footer

Вопрос:

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

любая помощь будет оказана.спасибо, вот мой полный код : https://codepen.io/ROY1319/project/editor/ANyGyr

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #9bf6ff;
  font-family: 'Oswald', sans-serif;
  width: 100%;
}

#headerExperience {
  line-height: 200px;
  font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: khaki;
  background-color: steelblue;
  background-image: url("images/Experience background imagee.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  margin-bottom: 25px;
}

.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  margin-bottom: 25px;
}

.century,
.LNA {
  border: 2px solid black;
  font-size: 16px;
  background-color: #E5ECE9;
  display: block;
}

.century,
.LNA {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 15OPX
}

.headers,
.tasks {
  display: block;
  align-content: space-around;
}


/* nav and ul */

ul {
  overflow: hidden;
  display: inline-block;
  /* how do I set the vertical spacing between the list items? */
}

li {
  margin: 10px 0;
  letter-spacing: 2px;
}

footer {
  background-color: orangered;
  padding: 0 1rem;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
}

footer .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: red;
  padding: 5em 0;
}

footer ul {
  list-style: none;
  margin: 0;
}

footer li {
  display: inline-block;
  padding: 0.75rem 1.25rem;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="experience.css" />
  <title>Experience</title>
</head>

<body>
  <!--Header-->
  <div id="headerExperience">
    <h1>Experience</h1>
  </div>
  <!--container-->
  <div class="container">
    <!-- Century-->
    <div class="century">
      <div class="media">
        <img src="imag logo.png" alt="CenturyImage" />
        <figcaption>Century Logo</figcaption>
      </div>
      <div class="headers">
        <h2>ddddd</h2>
        <h3>IT student Worker</h3>
        <h4>Whie MN,2018</h4>
      </div>
      <div class="tasks">
        <h5>TASKS</h5>
        <ul>
          <li>
            1.Instructed users over the phone by describing what to look for and steps to take.
          </li>
          <li>
            2.Adapted to change and learn new version of Microsoft quickly.
          </li>
          <li>
            3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
          </li>
          <li>4.Created appropriate technical documents.</li>
        </ul>
      </div>
    </div>

    <!-- lNA-->
    <div class="LNA">
      <div class="media">
        <img src="images/logo.jpg" alt="logo" />
        <figcaption>LNA Logo</figcaption>
      </div>

      <div class="headers">
        <h2>LNA</h2>
        <h3>Digital Support Specialist</h3>
        <h4>Minneapolis MN,2021-Present</h4>
      </div>
      <div class="tasks">
        <h5>Tasks</h5>
        <ul>
          <li>1.Update and manage a simple program website.</li>
          <li>2.Help participants access free and safe internet service.</li>
          <li>
            3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
          </li>
          <li>
            4.Distribute free laptops and tech accessories to participants.
          </li>
          <li>5.Lead small student groups practicing computer skills.</li>
        </ul>
      </div>
    </div>
  </div>

  <footer> // footer started here
    <div class="foot">
      <div class="copyright">amp;copy; A Team</div>
      <nav>
        <ul>
          <li>Home</li>
          <li>Contact</li>
          <li>Experience</li>
          <li>Achievemants</li>
          <li>About</li>
        </ul>
      </nav>
    </div>
  </footer>
</body>



</html>

Комментарии:

1. height: 100vh; установленный в вашем контейнере позволяет переполнять его содержимое , ваш нижний колонтитул находится прямо за ним, но то, что переполняется, отображается поверх него . Удалите его или сделайте его минимальной высотой:100 вч; или добавьте переполнение:автоматически. Не уверен, чего ты в конце концов ожидаешь. Вот скрипка с переполнением jsfiddle.net/eyhb3dow

2. спасибо, чувак. Я не знаю, как озвучить ваш ответ, однако ваш ответ выглядит правильным.

Ответ №1:

В.элемент класса стопы => выравнивание элементов: гибкий конец;

Метки: ,