Вычисление высоты модели модели HTML5

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

Я не могу развернуть div, чтобы получить полный размер, рассчитанный с помощью гибкой модели коробки.

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

html, body {
  font-family: Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#box-1 {
  background-color: #E8B15B;

}
#box-2 {
  background-color: #C1D652;
}
#main {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}


.flexbox {
  display:-moz-box;
  display:-webkit-box;
  display: box;
  text-align: left;
  overflow: auto;
}
H1 {
  width: auto;
}
#box-1 {
  height: auto;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -moz-box-flex: 3;
  -webkit-box-flex: 3;
  box-flex: 3;
}
#box-2 {
  height: auto;
  min-width: 50px;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}
#fullsize{
  background-color: red;
  height: 100%;
}
<div id="main" class="flexbox">
  <div id="box-1" class="flexbox">
    <div id="fullsize">
      <p>Hallo welt</p>
    </div>

  </div>
  <div id="box-2" class="flexbox"> 

  </div>
</div>

Ответы

Ответ 1

Я сам боролся с этим, но, наконец, смог найти решение.

Смотрите jsFiddle, хотя я только добавил префиксы webkit, открытые в Chrome.

У вас в основном есть 2 вопроса, которые я буду рассматривать отдельно.

  • Получение дочернего элемента flex-item для заполнения высоты 100%
    • Установите position:relative; в родительский элемент дочернего элемента.
    • Задайте position:absolute; для дочернего элемента.
    • Затем вы можете установить ширину/высоту по мере необходимости (100% в моем примере).
  • Фиксирование прокрутки прокрутки "quirk" в Chrome
    • Поместите overflow-y:auto; в прокручиваемый div.
    • Прокручиваемый div должен иметь определенную высоту. Мой образец уже имеет высоту 100%, но если ни один из них уже не применяется, вы можете указать height:0;

Подробнее об ошибке прокрутки см. в этом .

Ответ 2

Вы также должны сделать div, который хотите развернуть гибкий ящик, и добавить значение flex. Это устраняет проблему.

#fullsize{
    background-color: red;

    display: -webkit-box;
    display: box;
    display: -moz-box;

    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}

Ответ 3

так как есть некоторый интерес к этому вопросу, я дам вам текущее решение, которое я нашел. Он тестируется в chrome (в настоящий момент другой браузер не работает с этим образцом, но получил еще больше от работы в FF, который каким-то образом не работает, когда я "просто его"...).

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

Однако даже в Chrome возникает ошибка при уменьшении размера и изменении размера элемента, чтобы исчезла полоса прокрутки.

Вот html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>flexbox example - 2 column layout</title>
    <meta name="author" content="Gwilym Johnston">
    <style type="text/css">   
    html, body{
        height: 100%;
        margin: 0px;
    }
    #box-orient-example {
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        -ms-box-orient: horizontal;
        box-orient: horizontal;
        display: -moz-box;
        display: -webkit-box;
        display: -ms-box;
        display: box;
        height: 100%;
        overflow: auto;
    }
    #box1 {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        -ms-box-flex: 1;
        background: none repeat scroll 0 0 lightblue;
        text-align: center;
        overflow: auto;
        position: relative;
    }
    #box2 {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        -ms-box-flex: 1;
        background: none repeat scroll 0 0 #DDDDDD;
        text-align: center;
        overflow: auto;
        position: relative;
    }

    .abs {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .rel{
        position: relative;
    }
    </style>
</head>
<body>
    <div id="box-orient-example" class="example">
        <div id="box1">
            <div class="abs">
                <div class="rel"> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                </div>
            </div>
        </div>
        <div id="box2">
            <div class="abs">
                <div class="rel"> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
            </div>
        </div>
    </div>
</body>
</html>