Уменьшение высоты div при уменьшении браузера

Question

Уменьшение высоты div при уменьшении браузера

0

Я установил div на height: 400px; и width 100%;

Я хочу, чтобы он уменьшался при уменьшении браузера. max-height: 400px будет ответом, но тогда div станет 0px высоким... если вы поймете, что я имею в виду. Div больше не высотой 400px с max-height: 400px;

Содержимое div - это текст. этот текст все еще виден, но мне нужно, чтобы весь div был 400px heigh (для фонового цвета и для div ниже этого div).

Я хочу: я хочу div с минимальной высотой, но уменьшится, когда браузер будет уменьшен...

David Hakkert 03 окт. 2013, в 14:22

Источник

0

поделиться jsfiddle.net
Naveen Kumar Alonekar 03 окт. 2013, в 11:51
0

вероятно, вы должны использовать min-width
vishalkin 03 окт. 2013, в 11:51
0

Ваш вопрос не имеет никакого смысла вообще. Как вы можете иметь div с фиксированной высотой, которая меняет высоту ?!
Coop 03 окт. 2013, в 11:52
0

Извините, если мой вопрос не имеет смысла ... Я голландец, мой английский не так хорош. Я не хочу фиксированной высоты буквально. Я хочу высоту 400px, но при масштабировании браузера будет уменьшаться.
David Hakkert 03 окт. 2013, в 11:56
0

Может быть, это поможет: я хочу div с минимальной высотой, но уменьшится, когда браузер будет уменьшен ...
David Hakkert 03 окт. 2013, в 11:59

Показать ещё 3 комментария

Теги:

html

css

browser

scaling

2 ответа

Ещё вопросы

вероятно, вы должны использовать min-width
Ваш вопрос не имеет никакого смысла вообще. Как вы можете иметь div с фиксированной высотой, которая меняет высоту ?!
Извините, если мой вопрос не имеет смысла ... Я голландец, мой английский не так хорош. Я не хочу фиксированной высоты буквально. Я хочу высоту 400px, но при масштабировании браузера будет уменьшаться.
Может быть, это поможет: я хочу div с минимальной высотой, но уменьшится, когда браузер будет уменьшен ...

fcalderan · Answer 1 · 2013-10-03T09-16-00.000Z

Пример codepen: http://cdpn.io/cjyaq

Установите height:100% и max-height: 400px на элемент div

Установите также height: 100% для элемента html и body

Соответствующий CSS

html, body { padding: 0; margin: 0; height: 100%; }

div { 

  border: 3px red solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  height: 100%; max-height: 400px; 
}

Примечание: если ваш браузер достаточно современен и он поддерживает модули vh/vw нет необходимости устанавливать высоту элементов body и html: просто примените

height: 100vh; max-height: 400px;

на ваш элемент div

HU! ?? Никогда не слышал о 100vh! Поддерживает ли Internet Explorer 100vh? потому что это работает довольно хорошо на самом деле ..
Он должен хорошо работать с IE9 (в комплекте) - см. Ссылку, которую я предоставил

Tauri28 · Answer 2 · 2013-10-03T10-00-00.000Z

Назначьте как высоту: 100%, так и максимальную высоту: 400 пикселей на DIV.

Поскольку height: 100% наследует высоту родителя, сначала убедитесь, что у родителя есть высота - для этого используйте веб-инспектор chromes или аналогичный инструмент. Если ваш DIV находится внутри тега BODY, я рекомендую также установить высоту BODY на 100%. Проверьте эту скрипку: jsfiddle.net/7c3fb