У меня есть контейнер divс двумя детьми. Первый ребенок имеет заданный рост. Как мне сделать так, чтобы второй дочерний divэлемент занимал «свободное место» контейнера, не задавая определенной высоты?
В этом примере розовый цвет divдолжен занимать также белое пространство.
Подобно этому вопросу: как заставить div занимать оставшуюся высоту?
Но я не хочу давать абсолютную позицию .
Ответы:
Расширение #downдочернего элемента, чтобы заполнить оставшееся пространство, #containerможет быть выполнено различными способами в зависимости от поддержки браузера, которую вы хотите достичь, и от того, #upимеет ли она определенную высоту.
Образцы
Сетка
gridМакет CSS предлагает еще один вариант, хотя он может быть не таким простым, как модель Flexbox. Однако для этого требуется только стилизация элемента контейнера:
.container { display: grid; grid-template-rows: 100px }В grid-template-rows определяет первую строку как фиксированную высоту 100 пикселей, а оставшиеся строки автоматически растягиваются, чтобы заполнить оставшееся пространство.
Я почти уверен, что IE11 требует -ms-префиксов, поэтому не забудьте проверить функциональность в браузерах, которые вы хотите поддерживать.
Flexbox
Модульflexbox CSS3 Flexible Box Layout ( ) теперь хорошо поддерживается и его очень легко реализовать. Поскольку он гибкий, он работает даже тогда, когда #upне имеет определенной высоты.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }Важно отметить, что поддержка IE10 и IE11 для некоторых свойств flexbox может содержать ошибки, а IE9 или более ранняя версия не поддерживает вообще.
Расчетная высота
Еще одно простое решение - использовать функциональный блок CSS3calc , как указывает Альваро в своем ответе , но для этого требуется, чтобы высота первого дочернего элемента была известным значением:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }Он довольно широко поддерживается, с единственными заметными исключениями: <= IE8 или Safari 5 (без поддержки) и IE9 (частичная поддержка). Некоторые другие проблемы включают использование calc в сочетании с преобразованием или box-shadow , поэтому обязательно проверьте в нескольких браузерах, если это вас беспокоит.
Другие альтернативы
Если старше необходима поддержка, вы могли бы добавить height:100%;к#down сделают розовую Диву полную высоту, с одной оговоркой. Это вызовет переполнение контейнера, потому что #upтолкает его вниз.
Следовательно, вы можете добавить overflow: hidden; в контейнер, чтобы исправить это.
В качестве альтернативы, если высота #upфиксирована, вы можете расположить ее абсолютно внутри контейнера и добавить верхнюю обивку к#down .
И еще один вариант - использовать отображение таблицы:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}position: relative;позиционирует его относительно контейнера, а не окна. Так что это должен быть жизнеспособный вариант.
Прошло почти два года с тех пор, как я задал этот вопрос. Я только что придумал css calc (), который решает эту проблему, и подумал, что было бы неплохо добавить его, если у кого-то такая же проблема. (Кстати, в итоге я использовал абсолютную позицию).
http://jsfiddle.net/S8g4E/955/
Вот css
#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}И подробнее об этом здесь: http://css-tricks.com/a-couple-of-use-cases-for-calc/
Поддержка браузера: http://caniuse.com/#feat=calc
calcгде широкая поддержка браузеров не так важна (IE8 и ниже и Safari 5 не поддерживают его).
#upвысотой?
В моем ответе используется только CSS, и он не использует overflow: hidden или display: table-row. Это требует, чтобы у первого ребенка действительно была заданная высота, но в своем вопросе вы указываете, что только второй ребенок должен иметь не указанную высоту, поэтому я считаю, что вы должны найти это приемлемым.
html
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>css
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }Я не нашел полностью удовлетворительного ответа, поэтому мне пришлось выяснить его сам.
Мои требования:
calc()не должен использоваться, так как оставшийся элемент не должен ничего знать о размерах других элементов;flex-grow: 1для всех прямых родителей с вычисленной высоты (если таковые имеются) и элемент , таким образом они будут занимать все оставшееся пространство , когда размер содержание элемента меньше;flex-shrink: 0для всех гибких элементов фиксированную высоту, чтобы они не становились меньше, когда размер содержимого элемента больше, чем размер оставшегося пространства;overflow: hiddenдля всех прямых родителей с вычисленной высоты (если таковые имеются) , чтобы отключить скроллинг и запретить отображение содержимого переполнения;overflow: autoна элемент , чтобы включить прокрутку внутри него.JSFiddle (элемент имеет прямых родителей с вычисленной высотой)
JSFiddle (простой случай: нет прямых родителей с вычисленной высотой)
проверьте демо - http://jsfiddle.net/S8g4E/6/
использовать css -
#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}height: 1pxк, #upчтобы убедиться, что он занимает минимальную высоту. Вот поддержка браузером для display: table: caniuse.com/css-table
Если меня не недоразумение, вы можете просто добавить height: 100%;и overflow:hidden;к #down.
#down {
background:pink;
height:100%;
overflow:hidden;
}Изменить: поскольку вы не хотите использовать overflow:hidden;, вы можете использовать display: table;для этого сценария; однако он не поддерживается до IE 8. ( display: table;поддержка )
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}Примечание: вы сказали, что хотите, чтобы #downвысота была равна #containerвысоте минус #upвысота. display:table;Решение делает именно то, что и это jsfiddle будет изображать , что довольно ясно.
overflow:hiddenчтобы скрыть дополнительный контент.
Вы можете использовать поплавки для перемещения содержимого вниз:
У вас есть контейнер фиксированного размера:
#container {
width: 300px; height: 300px;
}Контенту разрешено течь рядом с поплавком. Если мы не установим float на полную ширину:
#up {
float: left;
width: 100%;
}В то время как #upи #downразделяют верхнюю позицию, #downсодержимое может начинаться только после нижней части плавающего #up:
#down {
height:100%;
}#up, то это, вероятно, приемлемо.
Я не уверен, что это можно сделать исключительно с помощью CSS, если только вам не удобно имитировать это с помощью иллюзий. Возможно использовать ответ Джош Mein, и набор #containerдляoverflow:hidden .
Для чего это стоит, вот решение jQuery:
var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);