Как получить средний div, который вы заполняете вертикальным пространством?

#html #css #layout

#HTML #css #макет

Вопрос:

Я довольно новичок в веб-дизайне и пытаюсь протестировать макеты страниц. У меня есть макет с заголовком, левым плавающим div, правым плавающим div, телом и нижним колонтитулом. Что я пытаюсь сделать, так это заставить «body» div заполнить вертикальное пространство между плавающими разделениями. А также, если возможно, как я могу заставить весь макет заполнить вертикальное пространство экрана? Я включил изображение внизу страницы, я пытаюсь заполнить все исписанное пространство.

Вот мой html-код,

 div.container {
  width: 100%;
  border: solid 1px;
}
header,
footer {
  background-color: rgb(000, 000, 000);
  color: rgb(255, 255, 255);
  padding: 10px;
  text-align: center;
  clear: left;
}
#nav {
  background-color: rgba(50, 50, 50, 0.8);
  float: left;
  width: 150px;
  padding: 10px;
}
#body {
  background-color: rgba(100, 100, 100, 0.8);
  overflow: hidden;
  padding: 10px;
  text-align: center;
}
#right {
  background-color: rgba(50, 50, 50, 0.8);
  float: right;
  max-width: 150px;
  padding: 10px;
}

 <body>
  <div class="container">
    <header>
      <h1>Title</h1>
    </header>
    <div id="nav">
      <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
        ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
        aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
    </div>
    <div id="right">
      <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
        ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
        aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
    </div>
    <div id="body">
      <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
        ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
        aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
    </div>
    <footer>Bottom</footer>
  </div>
</body>

</html>

Что я пытаюсь выяснить.

1. он работает нормально только jsfiddle.net/xwsxupv0 … что именно вы хотите сделать с 🙂

2. Я бы хотел, чтобы «body» div полностью заполнял пространство между двумя плавающими разделениями.

3. Вы почти закончили 🙂

4. счастливого кодирования 🙂 <3

5. Это будет довольно сложно сделать с плавающими значениями. Особенно, если у вас есть высота, которая может меняться. Но это можно сделать с помощью flexbox. Вот так: jsfiddle.net/xwsxupv0/3 Если это то, что вы хотите, я могу добавить более подробное объяснение позже. (просто оставьте комментарий, если хотите, чтобы я)

Ответ №1:

Попробуйте этот CSS:

   div.container {
    width:100%;
    border:solid 1px;
  }
  header, footer {
    background-color:rgb(000,000,000);
    color:rgb(255,255,255);
    padding:10px;
    text-align:center;
    clear:left;
  }
  #nav {
    background-color:rgba(50,50,50,0.8);
    float:left;
    width:150px;
    padding:10px;
  }
  #body {
    background-color:rgba(100,100,100,0.8);
    overflow:hidden;
    padding:10px;
    text-align:center;
  }
  #right {
    background-color:rgba(50,50,50,0.8);
    float:right;
    max-width:150px;
    padding:10px;
  }

https://jsfiddle.net/xwsxupv0/1/

1. если в #body нем будет больше содержимого — удалите height:100vh его в css. И сделайте оба плавающих div position:fixed . Теперь вы получите лучший дизайн. (исправлено вправо и влево, прокрутка основного div)