Высота: 100%, чтобы соответствовать высоте браузера

У меня есть следующий код:Высота: 100%, чтобы соответствовать высоте браузера

HTML:

<html> 
    <body> 
    <div> 
     <section></section> 
     <section>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </section> 
    </div> 
    </body> 
</html>

CSS:

html, body { 
    height: 100%; 
} 

div { 
    display: flex; 
    height: 100%; 
    align-items: stretch; 
} 

div > section:first-of-type { 
    width: 400px; 
    height: 100%; 
    background: #0f0; 
} 
div > section:last-of-type { 
    height: 100%; 
    background: #f00; 
    width: 200px; 
}

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

Я добавил рост: 100% до обеих секций, HTML и тела, но я получаю следующие результаты: http://jsfiddle.net/cs8f65wp/

Как вы можете видеть, фон «вырезать» после того, как свиток на обеих секциях, так моя догадка, что высота: 100% вызывает эту проблему.

Есть ли способ исправить это с помощью HTML/CSS (без JavaScript) и почему у меня возникает эта проблема?

источник

2014-12-06 Mentalhead

Подобно http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the- же высоты – Tzach

Использовать min-height вместо высоты на гибком контейнере. Таким образом, он будет растягиваться до высоты тела или содержимого, в зависимости от того, что выше. Нет необходимости устанавливать высоту на гибком контенте.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    display: flex; 
 
    align-items: stretch; 
 
    min-height: 100%; 
 
} 
 
div > section:first-of-type { 
 
    width: 400px; 
 
    background: #0f0; 
 
} 
 
div > section:last-of-type { 
 
    width: 200px; 
 
    background: #f00; 
 
}

<div> 
 
    <section></section> 
 
    <section> 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    </section> 
 
</div>

источник

2014-12-06 09:41:39

Высота: 100%, чтобы соответствовать высоте браузера

ответ

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