Блог

Главная - Вопросы по программированию - Как я могу заставить DIV растягиваться до нижней части страницы после прокрутки

Как я могу заставить DIV растягиваться до нижней части страницы после прокрутки

#html #css #navbar

#HTML #css #панель навигации

Вопрос:

Я пытаюсь создать веб-страницу со следующим дизайном:

Все выглядит нормально, однако, если содержимое справа выливается на страницу, и мне приходится прокручивать вниз, левая панель меню («second_navbar») не растягивается до конца страницы.

Я попытался изменить «position» на absolute и добавить атрибут «bottom», равный 0, но безуспешно.

Как я могу сделать так, чтобы левая панель навигации придерживалась верхней панели навигации, одновременно растягиваясь до нижней части страницы после прокрутки?

Заранее спасибо за ваш ответ!

РЕДАКТИРОВАТЬ: я добавил содержимое слева, проблема очевидна, если вы свернете окно и прокрутите вниз, чтобы увидеть текст

 * {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html {
  min-height: 100%;
}

body {
  background-color: rgb(225, 225, 225);
}

#header {
  position: relative;
  background-color: white;
  text-align: center;
  border-color: rgb(93, 87, 87, 0.5);
  color: rgb(93, 87, 87);
  border-bottom-style: solid;
  border-width: 1px;
}

p {
  margin-top: 0;
  padding: 5px;
  font-size: 48px;
}

#navbar {
  position: relative;
  font-weight: bold;
  color: rgb(93, 87, 87);
  padding: 5px;
  align-items: center;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#navbar li {
  width: 160px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  list-style: none;
}

#second__navbar {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: white;
  text-decoration: none;
  list-style: none;
}

#second__navbar  li{
  display: block;
  font-size: 20px;
  margin: 15% 0 0 15%;
}  
 <body>
  <div id="header">
    <p>My Name</p>
  </div>
  <div >
    <ul id="navbar">
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
    </ul>
  </div>
  <div>
    <ul id="second__navbar">
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
    </ul>
  </div>
  <div style="padding-left:50%; margin: 20% 20% 20% 20%">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>

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

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

2. Спасибо, я сделал это!

3. <br><br><br><br><br><br><br><br><br> ну, класс с высотой ИЛИ верхним и нижним заполнением и / или полями, вероятно, был бы лучше, чем все это, что

4. Верно, я изменил, как было предложено!

Ответ №1:

Я использовал display: flex и переупорядочил некоторые разделы контейнера, чтобы получить то, что вы ищете (я думаю!). Взгляните на полное руководство по Flexbox, чтобы узнать, как использовать flex. Обычно я использую flex для упорядочивания элементов контейнера, но не использую flex для небольших элементов вашей страницы, таких как абзацы текста. Мне также нужно было добавить height: 100% в html . Очень хорошо разберитесь с инструментами разработчика вашего браузера, чтобы увидеть, какие элементы расположены не так, как вы ожидаете.

 html {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(225, 225, 225);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#header {
  position: relative;
  background-color: white;
  text-align: center;
  border-color: rgb(93, 87, 87, 0.5);
  color: rgb(93, 87, 87);
  border-bottom-style: solid;
  border-width: 1px;
}

p {
  margin-top: 0;
  padding: 5px;
  font-size: 48px;
}

#navbar {
  margin: 0;
  position: relative;
  font-weight: bold;
  color: rgb(93, 87, 87);
  padding: 5px;
  align-items: center;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#navbar li {
  width: 160px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  list-style: none;
}

.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
}

#second__navbar {
  background-color: white;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#second__navbar li {
  display: block;
  font-size: 20px;
  margin: 10px 0;
}

.content {
  margin: 1em;
}  
 <!DOCTYPE html>
<html>

<body>
  <div id="header">
    My Name
  </div>
  <div>
    <ul id="navbar">
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
    </ul>
  </div>
  <div class="content-wrap">
    <ul id="second__navbar">
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
    </ul>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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

</html>