Отзывчивая высота div относительно фиксированной высоты HTML

Поскольку большинство окон браузера различаются в зависимости от экрана, я стараюсь, чтобы на веб-странице не было прокрутки, при этом полный контент страницы отображался на одной странице браузера. Мое тело имеет следующий стиль:Отзывчивая высота div относительно фиксированной высоты HTML

<body style="overflow:hidden;height:100%">

Я хотел бы иметь два <div> «S сложенных друг на друга. Один занимает 60% высоты, а другой занимает 40% при сохранении фиксированного покрытия для всего порта просмотра браузера. Это возможно?

Я в настоящее время жестко кодирует высоты для своих <div>, я только понял, что это может быть правильным для моего браузера, но кто-то другой не сможет увидеть то же самое.

Будет ли динамически устанавливать классы css для моих двух <div> в JS в соответствии с высотой их браузера. Это хорошее решение для этого?

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

источник

2015-03-24 lzc

Если вы supporting quite modern browsers (≥ IE9, Firefox, Chrome, Safari, Opera), вы можете всегда использовать видовых единицы измерения: vh и vw :)

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    /* or 100vw, that's the same */ 
 
    height: 100vh; 
 
} 
 
.h60 { 
 
    background-color: #eee; 
 
    height: 60vh; 
 
} 
 
.h40 { 
 
    background-color: #333; 
 
    height: 40vh; 
 
} 
 

 
/* Unrelated styles, for display purposes only */ 
 
.wrapper > div { 
 
    display: flex; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
p { 
 
    margin: 0; 
 
} 
 
.wrapper > div:last-child { 
 
    color: #eee; 
 
}

<section class="wrapper"> 
 
    <div class="h60"> 
 
    <p>I have a height that is 60% of the viewport.</p> 
 
    </div> 
 
    <div class="h40"> 
 
    <p>I have a height that is 40% of the viewport.</p> 
 
    </div> 
 
</section>

В единственная ошибка заключается в том, что вычисления vh являются ошибками в iOS7, поэтому вы можете использовать конкретные запросы @media, чтобы вручную установить высоты для пользователей Safari iOS7.

источник

2015-03-24 21:32:48 Terry

Если вы хотите динамически устанавливать высоту divs в зависимости от высоты окна просмотра, тогда, как правило, JavaScript является вашим лучшим вариантом.

Прежде чем показывать какой-либо контент, вычислите высоту окна, установите высоту того, что вам нужно, а затем сделайте контент видимым.

На стороне примечания, лично говорящий мне не нравится этот стиль веб-сайта. Я думаю, что это полезно только на веб-сайтах в стиле приложения, для этого требуется много юзабилити-тестирования, поскольку он нарушает стандартное поведение браузера, и для этого требуется много кросс-браузерного тестирования, потому что вы в конечном итоге используете много настраиваемого кода. </rant>

источник

2015-03-24 21:31:35

Если вы не хотите фантазии VH- и Vw вещи это еще хватит:

html, body{ 
 
    height: 100%; 
 
} 
 
body{ 
 
    overflow: hidden; 
 
} 
 
.foo{ 
 
    height: 60%; 
 
    background: #369; 
 
} 
 
.bar{ 
 
    height: 40%; 
 
    background: #693; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    </head> 
 
    <body> 
 
    <div class="foo"></div> 
 
    <div class="bar"></div> 
 
    </body> 
 
</html>

источник

2015-03-24 21:41:23 iSchluff

Вот еще одна возможность:
http://codepen.io/panchroma/pen/ZYwXLP

В вашем случае я подумайте, используя vh, как я здесь сделал, или у flexbox есть что порекомендовать, вы в итоге чистый код.

HTML

<div class="top">top div</div> 
<div class="bottom">bottom div</div>

CSS

.top{ 
    height:60vh; 
} 

.bottom{ 
    height:40vh; 
}

Успехов!

источник

2015-03-24 23:24:01

Отзывчивая высота div относительно фиксированной высоты HTML

ответ

Смежные вопросы