Равные по высоте поплавковые элементы - PullRequest
Новая
       16

Равные по высоте поплавковые элементы

1 голос
/ 24 октября 2011

Извините за очень простой вопрос, но я только начинаю с HTML и CSS и хочу создать внутри него <div> и два <div> (один с плавающей на левой стороне и один справа).Я хочу, чтобы они оба имели одинаковую высоту (наследуйте от родителя, поэтому height: 100%), но что-то работает не так, как ожидалось.

Вот текст ниже красного div (особенно в меньших разрешениях): http://jsfiddle.net/KqbtG/

Это решение почти идеально и выглядит точно так же, как и ожидалось, но красный div выше синего (Lorem ipsum do и т. Д. Невидим):

http://jsfiddle.net/4EnF9/1/

Есть идеи?У меня не может быть фиксированной высоты, потому что у меня будет множество этих элементов и различного содержания в них.

Ответы [ 2 ]

2 голосов
/ 24 октября 2011 
#container {
    display: inline-block;
    background-color: #eee;
    width: 90%;
    height: 300px;
}

#menu {
    float: left;
    background-color: red;
    width: 100px;
    height: 100%;  
}

#content {
    background-color: blue;
    height: 100%; 
}

Вы должны сделать две вещи:

  1. Установить высоту контейнера div, чтобы его можно было наследовать
  2. Убедитесь, что содержимое имеет высоту: 100%
0 голосов
/ 24 октября 2011

Во втором примере, когда красный div переходит поверх синего div, его ', потому что красный div позиционируется как абсолютный, что эффективно удаляет его из "потока" страницы.

Чтобы исправить это, добавьте margin-left:100px к правому (синему) div, чтобы вывести его из-под красного div.

Пример: http://jsfiddle.net/4EnF9/2/

...