Расширьте вложенное отделение к высоте контейнерного отделения, когда контейнер будет иметь height:auto?

Question

Расширьте вложенное отделение к высоте контейнерного отделения, когда контейнер будет иметь height:auto?

У меня есть контейнерное отделение и два вложенных отделения в. Я не управляю содержанием ни одного из этих вложенных отделений.

То, в чем я по существу нуждаюсь, должно заставить два вложенных отделения всегда иметь ту же высоту. Я полагал, что это может быть достигнуто путем предоставления контейнерного отделения height:auto так, чтобы оно расширило бы свою собственную высоту самому высокому из двух вложенных отделений (каждый из которых простирается для установки его собственному содержанию), и затем другое вложенное отделение простиралось бы к 100% высоты контейнера.

Вот то, что я попробовал:

Стиль:

#container{
  background-color:#FF0;
  overflow:auto;
}

#left{
  float:left;
  height:100%;
  width:20%;
  background-color:#F00;
}

#right{
  height:100%;
  width:60%;
  background-color:#0F3;
}

HTML:

<div id="container">

 <div id="left">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
 </div>

 <div id="right">
  <p>Content</p>
  <p>Content</p>
 </div>

</div>

Но это не работает. Контейнерные фрагменты для установки самому длинному отделению ("оставленный" в этом случае), но короче вложенному отделению ("право") не расширяют себя.

Обратите внимание, однако, что это ДЕЙСТВИТЕЛЬНО работает, если я даю контейнеру определенную высоту:

#container{
  background-color:#FF0;
  overflow:auto;
  height:300px;
}

Есть ли какой-либо способ, которым я могу заставить это работать, не обращаясь к таблицам?

9

css html nested height containers

задан ROMANIA_engineer 6 October 2017 в 20:11

2 ответа

Другие вопросы по тегам:

css html nested height containers

Похожие вопросы:

score 1 · Answer 1

Два наиболее распространенных способа сделать это: Поддельные столбцы с использованием изображений или установка равных значений высоты с помощью JavaScript. Я сделал скринкаст, чтобы продемонстрировать второй метод, Выравнивание высоты столбцов с помощью jQuery . Эту технику можно легко адаптировать для других библиотек или для простого JavaScript.

score 1 · Answer 2

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

В большинстве случаев (особенно в вашем случае) высота панелей устанавливается автоматически. Поэтому лучше увеличить высоту с помощью небольшого javascript

<script>
    function IncreaseHeight()
    {
        var first = Document.getElementById("Right").style.height;
        var second = Document.getElementById("Left").style.height;

        if(first < second)
        Document.getElementById("Right").style.height = Document.getElementById("Left").style.height;
        else
        Document.getElementById("Left").style.height = Document.getElementById("Right").style.height;
    }
</script>

обратите внимание, что в вашем случае нужно менять местами Right и Left.