Блог

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

Разделенный по вертикали DIV с прокручиваемым содержимым

#html #css

#HTML #css

Вопрос:

  ------------------    <-- container - should not be stretched by its contents
| ---------------- |
||               |||
||               |||   <-- main div - as big as container minus footer
||               |||                  if content overflows, scrollbar appear
||               |||
||   scrollbar-> H||
||               H||
||               |||
| ---------------- |
| ---------------- |   <-- footer - stretched by its contents (button) to
||  [button]      ||                minimal needed height
| ---------------- |
 ------------------

.

Контейнер может не иметь статического размера, поэтому решение «просто вычислить высоту основного div» не является вариантом (без JS, конечно)

HTML5, обратная совместимость не требуется.

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

1. Планируете ли вы, чтобы контейнер имел высоту окна просмотра? (Например, высота окна браузера)

2. Нет. Если это возможно, я уже нашел решения, используя position:fixed , но оно включено в другой сложный макет. (на ум приходит «грязное» решение с использованием iframe… но «грязный»)

3. Вы говорите, что не хотите указывать высоту, и она не должна принимать высоту содержимого и высоту области просмотра. Но какую высоту должен занимать контейнер?

4. На самом деле, Iframe имеет указанную высоту

5. Контейнер будет иметь либо постоянную высоту, либо относительную высоту (процент от высоты родительского элемента).

Ответ №1:

В CSS3 вы можете использовать

 height: calc(100% - 60px);

эти 60 пикселей могут представлять высоту нижнего колонтитула.

Ответ №2:

Попробуйте что-то вроде этого:

 /* css */

<style>
    .container{
        position: relative;
        height: 100%;
        width: 100%;
    }
    .main{
        position: relative;
        height: calc{100% - 10%};
        width: 100%;
        overflow: auto;
    }
    .footer{
        position: relative;
        height: 10%;
        width: 100%;
    }
</style>

<!-- html -->
<div class="container">
    <div class="main">
    </div>
    <div class="footer">
    </div>
</div>

Ответ №3:

Вот так; используя только html / flexbox:

Вы заметите, что в нижнем колонтитуле div при <p> добавлении тега div масштабируется до максимальной высоты 30% и заставляет основной div снова переполнять содержимое.

Должно работать без статической высоты / ширины контейнера, думаю, это зависит от родительского контейнера.

Первый: с минимальным содержанием

 <!DOCTYPE html>
<html>
<head>
<style>
.container{
    height:200px;
    width:400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
.main{
    width:100%;
    background-color:blue;
    overflow-y: scroll;
    }
    .main p{
        color:white;
    }
.footer{
    max-height:30%;
    width:100%;
    background-color:red;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    </div>
<div class="footer">
    <span>Trump2016</span>

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

Второй: с добавленным содержимым (отображение контейнера приведет к масштабированию и увеличению основного div).

 <!DOCTYPE html>
<html>
<head>
<style>
.container{
    height:200px;
    width:400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
.main{
    width:100%;
    background-color:blue;
    overflow-y: scroll;
    }
    .main p{
        color:white;
    }
.footer{
    max-height:30%;
    width:100%;
    background-color:red;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    </div>
<div class="footer">
    <span>Trump2016</span>
    <p>Trump2016</p>
  

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

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

1. В этом сообщении содержится ответ, который я искал, но, э-э, разве это не было так необходимо для скрытой предвыборной рекламы?

Ответ №4:

Проверьте, поможет ли это вам.

Я использую height: 100vh .container и .footer подтягиваюсь с минусовым запасом.

 * {
  margin: 0;
}
.container {
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 50px;
  overflow: auto;
}
.footer {
  height: 50px;
  text-align: center;
  margin-top: -50px;
  background: #ccc;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 15px;
}  
 <div class="outer">
  <div class="container">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>
<div class="footer">
  footer
</div>