CSS: высота текстового поля в процентах от высоты окна просмотра

Я хотел бы сказать, что высота текстовой области равна, скажем, 50% высоты окна просмотра. Как я могу это сделать? Простой height: 50% не выполняет трюк.

Ответ 1

Простая высота: 50% не выполняет трюк.

Нет, поскольку его родительский элемент не имеет явной высоты. Итак, 50% чего? Родитель говорит "auto", что означает, что он основывается на высоте содержимого ребенка. Это зависит от высоты родителя. Argh! и др.

Таким образом, вы должны дать своему родителю процентную высоту. И родительский родитель, вплоть до корня. Пример doc:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

Другая возможность, если вы не хотите устанавливать высоту во всем, - это использовать абсолютное позиционирование. Это изменяет элемент, основанный на размерах, от прямого родителя до ближайшего предка, с установкой "статичность по умолчанию, отличной от по умолчанию". Если нет элементов предка с позиционированием, то размеры основаны на "Начальный содержащий блок", который имеет тот же размер, что и область просмотра.

Наконец, существует тривиальная проблема "100% немного слишком велика из-за дополнительного дополнения и границы, применяемых к текстовым областям. Вы можете обойти это:

компрометирует что-то вроде 95%, или
настройка заполнения и граница 0/нет в текстовом поле или
с помощью "box-size: border-box;" изменить то, что означает "высота". Это функция будущего супа для CSS, которая требует много дополнительных обновлений для браузера (например, "-moz-box-sizing" ).

Ответ 2

Вот небольшой пример textarea, который занимает ровно 50% высоты видового экрана, используя блок просмотра CSS3 vh , который это

Равно 1% высоты исходного содержащего блока.

Итак, если мы установим высоту от textarea до 50vh, она получит половину высоты body:

html, body, textarea {
  box-sizing: border-box;
}

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

textarea {
  height: 50vh;
}

<textarea></textarea>

Ответ 3

Я думаю, вам нужно каким-то образом использовать javascript. Обработайте событие изменения размера и установите для области текста столько пикселей.

Ответ 4

Вы можете сделать это, если вы установите display: block. Но в html 4.01 strict вы должны определить cols и rows, но я думаю, вы можете переопределить их с помощью css.

Ответ 5

HTML и CSS не так хороши в том, чтобы делать такие вещи с высотами. Они, безусловно, больше касаются прокрутки по вертикали через свободно текущую страницу. Я думаю, что JavaScript, вероятно, будет вашим самым полным решением, как говорит Фрай Гуй.

Ответ 6

Пока у меня нет всех браузеров, чтобы проверить это, кажется, что большинство из них просто указывают, что высота должна работать.

Я тестировал это в Internet Explorer 7 и Firefox 3.0.

Просто используйте следующий код:

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

В каких браузерах у вас были проблемы с?

Ответ 7

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

Ответ 8

Попробуйте удалить

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">