<div> позиция: абсолютная; bottom: 0; не работает, как ожидалось, в IE7

Мой сайт, инструмент каталога курсов для университетов, имеет центральную панель, содержащую динамически обновляемый список классов. В Firefox, Opera и Chrome центральная панель имеет предполагаемое поведение прокрутки: когда список классов превышает высоту, центральная панель имеет полосу прокрутки. IE, однако, показывает только этот бар, когда высота явно задана. Не используя JavaScript для reset высоты центральной панели при изменении размера, как заставить Internet Explorer отображать полосу прокрутки?

Центральная панель:

<div id="middlenav">
    <div id="middleheader"></div>
    <div id="courselist"></div>
</div>

и его CSS:

div#middlenav {
    position: absolute;
    left: 250px;
    right: 350px;
    top: 0px;
    bottom: 0px;
}

div#courselist {
    overflow: auto;
    position: absolute;
    top: 55px;
    bottom: 0px;
    width: 100%;
}

Похоже, что центральная панель не подчиняется оператору bottom: 0px; и расширяется до полной высоты содержащегося #courselist. Я пробовал body { height: 100% }, но это тоже не исправило.

ОТВЕТЫ

Ответ 1

"Свойство top переопределяет свойство bottom..." https://developer.mozilla.org/en-US/docs/CSS/bottom

Измените top на auto вместо 0px:

div#middlenav
{
    position: absolute;
    left: 250px;
    right: 350px;
    top: auto;
    bottom: 0px;
}

Это должно зафиксировать нижнее позиционирование. Помните, что если #middlenav позиционируется абсолютно, оно будет относиться к тому, какой бы родительский элемент имел position:absolute; или position:relative;. Если #middlenav не имеет родительских элементов, которые расположены, это будет относиться к <body>.

Я не уверен, почему у вас #courselist абсолютно позиционируется; поскольку он находится внутри #middlenav, я думаю, вы можете оставить его статическим или позиционировать его относительно. Но независимо от того, что вы делаете, я думаю, вам нужна высота, установленная на #courselist или #middlenav. Значение по умолчанию height равно auto, поэтому не будет полосы прокрутки, потому что элемент будет расширяться, чтобы соответствовать его содержимому.

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

Ответ 2

Несмотря на то, что при использовании абсолютного позиционирования в CSS вполне допустимо устанавливать противоположные края, ограничения в Internet Explorer означают, что этот подход может не работать.

Невозможно избежать ошибки в Internet Explorer 6. В Internet Explorer 7 и более поздних версиях этот режим разрешит проблему.

Поддельные столбцы, которые распространяются на дно элемента, обычно достигаются с помощью faux columns.

Ответ 3

позиция: абсолютная; bottom: 0px; устанавливает элемент в нижней части элемента. Но он должен знать, где находится нижний элемент. Если вы установили высоту на 100% или уложите ее в другой элемент, расположенный внизу: 0px; Тогда он не знает, где находится дно, если только один из этих элементов не находится внутри (занимает всю высоту) и элемент с фиксированным размером. Вы не можете дать телу высоту 100%, потому что это будет просто продолжаться вечно. Попробуйте указать высоту тела или некоторый содержащий элемент.: D

Ответ 4

Убедитесь, что ваш doctype установлен на HTML строго, иначе IE будет вести себя изворотливым и запутаться, среди прочих, позиционирования и переполнения.

Добавьте это вверху страницы:

<!DOCTYPE html>

Ответ 5

Я не совсем уверен, насколько я полностью понимаю, но я думаю, что вы хотите, чтобы центральная панель прокручивалась, когда она достигла определенной высоты... Именно так я и сделал бы это.

#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
              overflow:scroll; overflow-x:hidden; width:500px; }

Это устанавливает ваш список курсов во всех браузерах на минимальную высоту 400, после прохождения полосы прокрутки. min-height не поддерживается в IE7 и ниже, поэтому я использовал IE hack _height 400, поэтому он действует как минимальная высота. overflow-x: скрытый скрывает горизонтальную прокрутку только в том случае, если вы хотите только вертикальный. Я надеюсь, это поможет вам.

Ответ 6

Не используйте верхнее и нижнее позиционирование в одном классе и не используйте правое и левое позиционирование в одном классе, так как они противоречат друг другу.