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>

Источник

3 ответа

Решение

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

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

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

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

Посмотрите этот ответ для получения дополнительной информации о проблеме прокрутки.

Источник

Вы также должны сделать 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;
}
Источник

Поскольку этот вопрос вызывает некоторый интерес, я дам вам текущее решение, которое нашел. Это тест в 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>
Источник
Другие вопросы по тегам