Div не растягивается до конца страницы

Пытаюсь растянуть <div> до конца страницы. Я хочу, чтобы этот <div> был чем-то вроде полосы по всей левой стороне моей страницы. Когда я открываю страницу, он растягивается по левой стороне, но когда я прокручиваю вниз, он больше не растягивается. Дело в том, что у меня есть несколько <div>, завернутых друг в друга, но тот, о котором я говорю, является дочерним только для элементов <html> и <body>. Я пробовал много вещей, чтобы заставить его работать правильно, но height:auto;, height:100%; или height:inherit;, похоже, не работают, но это работает, если я использую height:000px;. Я также должен упомянуть, что и <html>, и <body> имеют height:100%; и width:100%;.

Код выглядит так:

  .leftbar {
    background-color: rgba(0,0,0,0.85);
    width: 10%;
    height: 100%;
    float: left;
    position: relative;
    left: 0;
    margin-top:0;
    bottom:0;
    right:0;
    overflow: hidden;
}

Еще больше меня смущает то, что у меня также есть нижний колонтитул в нижней части моей страницы, но он отлично работает. Он растягивается настолько, насколько мне нужно. Код для этого выглядит так:

.footer {
    background-color: rgba(0,0,0,0.85);
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0;
}

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

Думаю, я знал о вашей проблеме, но не могу подтвердить свое предположение. Не могли бы вы опубликовать полный отрывок с описанием проблемы?

Wais Kamal 13.09.2018 21:58

Это буквально все, что есть в этом <div>. <body> <div class="leftbar"> </div> вот html, а вот <html> и <body> в css :: html { height: 100%; width: 100%; margin:0; padding:0; }body { background-image:url("hp1_background.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; width: 100%; height: 100%; margin:0; padding:0; }

user10360158 14.09.2018 19:27
0
2
256
3

Ответы 3

Вы можете использовать CSS Grid вместо плавающих div для создания этого макета. Вот пример:

/* Container */
.container {
  margin: 0;
}

/* Grid container */
.grid {
  display: grid;
  grid-template:
      [row1-start] "sidebar content" 90vh [row1-end]
      [row2-start] "footer footer" auto [row2-end]
      / 15vw auto; /* The width of each column */
}


/* Sidebar */
.sidebar {
  grid-area: sidebar;
}


/* Content */
.content {
  grid-area: content;
}


/* Footer */
.footer {
  grid-area: footer;
}
<body class='container'>
  <div class='grid'>
      <div class='sidebar'>This is the sidebar</div>
      <div class='content'>This is the main content</div>
      <footer class='footer'>This is the footer</footer>
  </div>
</body>

Сеточные системы имеют много преимуществ по сравнению с использованием поплавков, в том числе:

  • Легче читать
  • Можно легко сделать отзывчивым с помощью медиа-запросов
  • Сетка может быть легко расширена позже
  • Вы не запутаетесь, почему ваш макет случайным образом прерывается из-за поплавков

Альтернативой сетке может быть Flexbox.

Документы:

Я понятия не имею, что такое Grids и Flexbox, но обязательно изучу их.

user10360158 14.09.2018 19:31

Вы могли бы попробовать

height: 100vh;

Помните, что height: 100% заполняет 100% высоты своего родительского контейнера. Если родительский контейнер не достигает дна, левая панель не может.

min-height: 100vh; и height: 100vh; проблему не решили. Поскольку мой <div> является потомком только <html> и <body>, я не понимаю, как они не достигли бы дна. Разве они не должны покрывать все?
user10360158 14.09.2018 19:20

Ключевым моментом для удовлетворения ваших потребностей является использование: height: 100vh

Однако вы должны знать, что если содержимое sidebar длиннее, чем контейнер sidebar, фон sidebar будет отсутствовать при прокрутке вниз по 100vh.

Так что лучше использовать min-height: 100vh.

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

* {
  box-sizing: border-box;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}

.sidebar {
  float: left;
  width: 200px;
  min-height: 100vh;
  background: #f0f0f0;
  border: 1px solid #ededed;
}

.main-container {
  padding: 20px;
  height: 1200px;
  float: left;
  width: calc(100% - 200px);
  background: #ddd;
}

.footer {
  background: yellow;
  padding: 20px;
}
<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="main-container">
    This main container is very long.
  </div>
</div>
<div class="footer">
  Yay! you found footer.
</div>

Другие вопросы по теме