Установить высоту div в% не работает [дублировать]

CSS3 Simple Way

height: calc(100% - 10px); // 10px is height of your first div...

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

Сейчас есть тонна ответов, но я нашел, используя высоту: 100vh; для работы над элементом div, который должен заполнить все имеющееся вертикальное пространство.

Таким образом, мне не нужно играть с дисплеем или позиционированием. Это пригодилось при использовании Bootstrap для создания панели управления, в которой у меня была боковая панель и основной. Я хотел, чтобы главное растянуть и заполнить все вертикальное пространство, чтобы я мог применить цвет фона.

div {
    height: 100vh;
}

Поддерживает IE9 и выше: нажмите, чтобы увидеть ссылку

Для мобильного приложения я использую только VH и VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

Фактически вы можете использовать display: table, чтобы разделить область на два элемента (заголовок и содержимое), где заголовок может меняться по высоте, а контент заполняет оставшееся пространство. Это работает со всей страницей, а также когда область является просто содержимым другого элемента, расположенного с position, установленным на relative, absolute или fixed. Он будет работать до тех пор, пока родительский элемент имеет ненулевую высоту.

См. Этот скрипт , а также следующий код:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

Я нашел довольно простое решение, потому что для меня это была просто проблема дизайна. Я хотел, чтобы остальная страница не была белой под красным нижним колонтитулом. Поэтому я задал цвет фона страниц красным. И содержимое backgroundcolor белое. С высотой содержимого, установленной, например. 20 или 50% почти пустая страница не оставит всю страницу красной.

В CSS действительно нет звука, кросс-браузерного способа сделать это. Предполагая, что ваш макет имеет сложности, вам нужно использовать JavaScript для установки высоты элемента. Суть того, что вам нужно сделать, это:

Element Height = Viewport height - element.offset.top - desired bottom margin

Как только вы можете получить это значение и установить высоту элемента, вам нужно прикрепить обработчики событий как к окну onload, так и к onresize, чтобы вы могли стрелять ваша функция изменения размера.

Кроме того, если ваш контент может быть больше, чем область просмотра, вам необходимо установить переполнение-y для прокрутки.

он никогда не работал для меня иначе, чем с использованием JavaScript, как предлагалось NICCAI в самом первом ответе. Я использую этот подход для масштабирования <div> с помощью Google Maps.

Вот полный пример того, как это сделать (работает в Safari / FireFox / IE / iPhone / Andorid (работает с вращением)):

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

Это динамическое вычисление пространства для экрана, лучше используя Javascript.

Вы можете использовать технологию CSS-IN-JS, например ниже lib:

https: // github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

Во всех здравомыслящих браузерах вы можете поместить div «header» перед контентом, как родной брат, и тот же CSS будет работать. Однако IE7- неправильно интерпретирует высоту, если в этом случае float на 100%, поэтому заголовок должен быть в содержимом, как указано выше. Переполнение: автоматически вызовет двойные полосы прокрутки в IE (у которых всегда есть видимая панель прокрутки, но отключена), но без нее содержимое будет зажиматься, если оно переполняется.