Мое предположение заключалось в использовании абсолютного позиционирования, что оно относилось к родительскому div. Однако этот jsfiddle, похоже, не мешает этому. То, что я пытаюсь сделать, - это трехстрочный жидкостной макет с минимальной высотой, установленной в центральном ряду. Верх и низ имеют фиксированную высоту. К сожалению, я кодирую только IE7 и не имею возможности использовать min-height в моем CSS. Однако при использовании JQuery центр уменьшает размер, нижний колонтитул не перемещается относительно родителя. Информация и jsfiddle ниже.
Браузер: IE7
Стиль: CSS
HTML: 4.0 Строгий
JQuery: 1.10.1
скрипка после добавления позиции: относительная и высота 100% для обертки jsfiddle
HTML
<div id="wrapper">
<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>
</div>
CSS
html, body{
width:100%;
height:100%;
}
#wrapper{
background-color:blue;
height:100%;
width:100%;
margin:0px;
padding:0px;
min-width:700px;
}
#top{
position:absolute;
top:0px;
width:100%;
height:100px;
min-width:700px;
background-color:green;
}
#center{
position:absolute;
top:100px;
bottom:20px;
min-width:700px;
width:100%;
background-color:yellow;
}
#bottom{
position:absolute;
bottom:0px;
min-width:700px;
width:100%;
height:20px;
background-color:purple;
}
JQuery
var resizeTimer = false;
function doResize() {
if ($("body").height() == 500) {
//do nothing
}
else if ($("body").height() < 500) {
$("#wrapper").height(500);
$("#center").height(380);
}
else {
$("#wrapper").height("auto");
$("#center").height("auto");
}
resizeTimer = false;
}
$(window).on("resize", function () {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(doResize, 300);
});
Абсолютное позиционирование является относительным ближайшим родителем (вверх по родительской цепочке), на котором установлено положение (например, position: relative
или position: absolute
). Если ни один из родителей в родительской цепочке не имеет позиционирования, то абсолютное позиционирование относится к границам документа.
Если вы хотите, чтобы position: absolute
относилось к родительскому, заданное position: relative
родителя. Это не изменит положение родителя, но будет определять расположение дочерних элементов относительно родителя, а не относиться к некоторому родительскому или документу более высокого уровня.
Позиция не относится к родительскому объекту, по сравнению с ближайшим родителем, у которого есть позиционирование (или документ, если у родителя нет позиционирования).
Добавить position:relative
CSS для родительского элемента, чтобы сделать его позиционированием без фактического перемещения его в любом месте.