Автоматическое определение размеров двух элементов блока

0

Я хотел бы выполнить следующее. (что кажется невозможным)

Скажем, у меня есть контейнерный блок, который имеет фиксированную высоту и ширину. Внутри этого блока есть еще два блока. (Оранжевые и синие блоки)

Изображение 174551

Я хочу, чтобы оранжевый блок изменял размер своей высоты в зависимости от высоты синего блока. Синий блок расположен абсолютным в нижней части блока контейнера.

Как я могу сделать это только с помощью CSS? (и как можно меньше HTML)

Маленькая скрипка, которая показывает мою проблему: http://jsfiddle.net/uK64u/2/

Согласно запросу, одна из многих попыток:

HTML:

<div id="container">
    <div id="orange"></div>
    <div id="blue">Lorem ipsum dolor sit amet.</div>
</div>

CSS:

#container
{
    width: 400px;
    height: 700px;
}

#orange
{
    position: absolute;
    height: 100%;
}

#blue
{
    position: absolute;
    height: auto;
    bottom: 0;
}

Это не удается, так как синий блок перекрывает оранжевый вместо изменения его высоты.

  • 0
    На первый взгляд это кажется довольно простым. Можете ли вы опубликовать HTML и CSS, которые вы пробовали?
  • 0
    Чтобы уточнить, планируете ли вы отображать какой-либо контент в верхнем блоке или только в нижнем?
Показать ещё 12 комментариев
Теги:
position

2 ответа

0

Вы можете сделать это, указав оранжевую position:relative а текст на синем фоне - position:absolute. Смотрите FIDDLE

HTML

<div class="box-outer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
</div>

CSS

.box-outer {
    border:1px solid #222;
    background-color:orange;
    width:200px;
    height:300px;
    position: relative;
 }
 p {
    background-color:blue;
    padding:10px;
    margin-bottom:0px;
    vertical-align:baseline;
    position: absolute;
    bottom: 0;
    left: 0;
  }

У меня RE-EDITTED моя скрипка.....

Поделиться
  • 0
    Я боюсь, что все равно заблокирует контент, который уходит в оранжевый блок. Синие и оранжевые блоки должны быть разделены.
  • 0
    Я отредактировал скрипку. Теперь у вас будет оранжевый div с высотой авто. и синий div может быть ограничен, как вы упомянули в комментариях
Показать ещё 9 комментариев
0

Хорошо... ну, вот идея о том, как вы можете добиться такого поведения, хотя оно несколько вернется к дням табличных макетов. С помощью этого HTML:

<div class="container">
    <div class="orange">
        <!-- Content -->
    </div>
    <div class="blue">
        <div class="content">
            <!-- Content -->
        </div>
    </div>
</div>

И этот CSS:

.container {
    width: 400px;
    height: 700px;
    display:table;
}
.orange {
    background:#AAA;
    height:100%;
    display:table-row;
}
.blue {
    background:#CCC;
    display:table-row;
}
.blue .content {
    max-height:500px;
    overflow:scroll;
}

Я думаю, что это дает эффект, который вы описываете. Здесь JSFiddle демонстрирует это. Попробуйте добавить контент к нижнему элементу - если вы проверите элементы с помощью некоторых инструментов веб-разработчика, вы увидите, что верхний элемент фактически изменяет размер.

Я также взял на себя смелость применить ограничение к высоте содержимого нижнего элемента (и использовал overflow:scroll, а следовательно, дополнительные полосы прокрутки), хотя вы можете, конечно, удалить это, чтобы изменить то, как вы имеете дело с чрезмерным контентом.

Поделиться
  • 0
    Близко! Дело в том, что контейнер должен быть фиксированной высоты. Теперь таблица в стиле div растет вместе с ее содержимым.
  • 0
    Да, именно поэтому я добавил max-height на нижнем элементе. На этом этапе становится актуальным знать, что вы хотите, чтобы произошло, когда объединенные высоты содержимого превышают высоту контейнера - что, как вы изначально чувствовали, не входило в сферу применения вопроса.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню