HTML5 гибкий расчет высоты блочной модели - PullRequest
Новая
       10

HTML5 гибкий расчет высоты блочной модели

21 голосов
/ 06 октября 2011

после исследования гибкой коробочной модели в течение целого дня, я должен сказать, что она мне действительно нравится. Он реализует функциональность, которую я реализую в 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 ]

38 голосов
/ 13 марта 2013

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

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

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

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

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

2 голосов
/ 03 мая 2012

Вы также должны сделать 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;
}
0 голосов
/ 09 января 2012

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

Нет похожих вопросов

...