Высота CSS 100% в автоматическом режиме Brother DIV не работает в Chrome

Question

Высота CSS 100% в автоматическом режиме Brother DIV не работает в Chrome

0

Не удалось установить его...

У меня есть div с 2 div внутри. Первая определяет высоту, а вторая занимает эту высоту. Но хром не хочет этого делать.

<div style="display: table; height: 100%; width: 100%; min-height: 100%;">
    <div FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT></div>

    <div style="box-sizing: border-box; display: table; float: right; 
    height: auto; min-height: 100%; padding: 0 20px 81px; position: relative; 
    width: 280px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; 
    -o-box-sizing: border-box;"></div>
</div>

Lydia11 09 июнь 2014, в 09:13

Источник

1

почему бы не включить полный CSS-код для первого div? Также вы можете включить ссылку www.jsfiddle.net, чтобы помочь людям помочь вам.
Andrew 09 июнь 2014, в 07:07
0

добавить display: table-cell для вашего внутреннего div вместо display: table;
Suresh Ponnukalai 09 июнь 2014, в 07:09
0

FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT не является действительным свойством. Вы можете закрыть div перед этим. Кроме того, пожалуйста, избегайте использования встроенных стилей ... это делает ваш код нечитаемым и трудным для работы ... отдельная таблица стилей также может избежать дублирования. Зачем использовать CSS
T J 09 июнь 2014, в 07:09
0

Я использовал inline, чтобы облегчить проблему ... Я использую CSS и все это.
Lydia11 09 июнь 2014, в 08:07

Показать ещё 2 комментария

Теги:

html

css

google-chrome

2 ответа

0

Добавить отображение: свойство table-cell для вашего дочернего div. Таким образом, чтобы автоматически регулировать высоту div div.

 <div style="display:table; width:100%; height:100%; border:1px solid #f000ff;">
    <div style="height:400px; display:table-cell; background-color:#ff000f;">My Main Content</div>
    <div style="display:table-cell; float:right; height:100%; background-color:#ff00ff;">My Sample Content</div>
</div>

Проверьте Рабочий JSFIDDLE ЗДЕСЬ

В приведенной выше скрипте я назначил первую дочернюю высоту div 400px. Если вы измените эту высоту, правая сторона div автоматически отрегулирует ее высоту. Проверьте это и дайте мне знать, если возникнут какие-либо проблемы.

Suresh Ponnukalai 09 июнь 2014, в 04:59

0

просто быстрая точка: если для таблицы задана высота 100% и она принимает эту высоту, то внутренние ячейки таблицы также возьмут эту высоту и проигнорируют 400px
Pete 09 июнь 2014, в 07:48
0

Большое вам спасибо, это отлично работает !!
Lydia11 09 июнь 2014, в 08:07

Ещё вопросы

почему бы не включить полный CSS-код для первого div? Также вы можете включить ссылку www.jsfiddle.net, чтобы помочь людям помочь вам.
добавить display: table-cell для вашего внутреннего div вместо display: table;
FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT не является действительным свойством. Вы можете закрыть div перед этим. Кроме того, пожалуйста, избегайте использования встроенных стилей ... это делает ваш код нечитаемым и трудным для работы ... отдельная таблица стилей также может избежать дублирования. Зачем использовать CSS
Я использовал inline, чтобы облегчить проблему ... Я использую CSS и все это.
просто быстрая точка: если для таблицы задана высота 100% и она принимает эту высоту, то внутренние ячейки таблицы также возьмут эту высоту и проигнорируют 400px
Большое вам спасибо, это отлично работает !!

Jorn M. · Accepted Answer · 2014-06-09T05-31-00.000Z

Flexboxes - это самый простой способ создания столбцов равной высоты:

<style>
  .container {
    display: flex;
    display: -mx-flexbox; // IE10
    display: -webkit-flex; // Safari
    flex-grow: 0;
    -ms-flex-grow: 0; // IE10
    -webkit-flex-grow: 0; // Safari
  }
  .left, .right { width: 50%; }
  .left { 
    background-color: #c66; 
    height: 200px;
  }
  .right { background-color: #66c; }
</style>


<div class="container">
  <div class="left">
    <p>This is the left DIV.</p>
  </div>
  <div class="right">
    <p>This is the right DIV.</p>
    <p>Its height is equal to the left DIV.</p>
  </div>
</div>

Flexboxes не работают в IE9 и старше. Суреш-идея выше работает в старых браузерах, но в коде есть ошибка (ячейки таблицы не плавают), а встроенный CSS лучше избегать:

<style>
  .container { display: table; }
  .row { display: table-row; }
  .left, .right { 
    display: table-cell;
    width: 50%; 
  }
  .left { 
    background-color: #c66; 
    height: 200px;
  }
  .right { background-color: #66c; }
</style>


<div class="container">
  <div class="row">
    <div class="left">
      <p>This is the left DIV.</p>
    </div>
    <div class="right">
      <p>This is the right DIV.</p>
      <p>Its height is equal to the left DIV.</p>
    </div>
  </div>
</div>