0

Свойство height берется от значения родителя, так сказано в документации. У меня в таблице для второй строки, получается указать значение height для ячеек (td), но вот для textarea, внутри них, это не удается.

Вот фрагмент стилей для textarea:

textarea {
 margin: 0;
 margin-left: 8px;
 margin-right: 8px;
 height: 100%;
 width: calc(100% - 32px);
}

А вот код всей страницы:

html, body {
 height: calc(100% - 8px);
 width: calc(100% - 8px);
}

table {
 height: calc(100% - 48px);
 width: calc(100% - 8px);
 border-collapse: collapse;
}

tr:not(:nth-child(2)) {
 height: 22px;
}

tr:nth-child(2) {
 height: calc(100% - 22px);
}

tr:nth-child(3) {
 text-align: center;
}

td {
 width: 50%;
 vertical-align: top;
}

th, td {
 border: 1px solid #666666;
}

textarea {
 margin: 0;
 margin-left: 8px;
 margin-right: 8px;
 height: 100%;
 width: calc(100% - 32px);
}

tr:nth-child(2) td:not(:first-of-type) textarea {
 margin-left: 16px;
}

button {
 margin-left: 0px;
 margin-right: 8px;
 width: calc(100% - 22px);
}

td:not(:first-of-type) button {
 margin-left: 8px;
 margin-right: 0px;
 width: calc(100% - 22px);
}
<!DOCTYPE html>
<html>
<head>
<title>Two columns</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<th>Left column</th>
<th>Right column</th>
</tr>
<tr>
<td><textarea id="left_text"></textarea></td>
<td><textarea id="right_text"></textarea></td>
</tr>
<tr>
<td><button>Left button</button></td>
<td><button>Right button</button></td>
</tr>
</table>
</body> 
</html>

В итоге результат: результат

Как установить height: 100% для textarea, чтобы он занимал всю высоту ячейки?

11
  • Все работает, что вы имеете ввиду?textarea занимает всю высоту блока 8 янв 2020 в 14:25
  • @ПоляковРоман добавил же картинку, там явно видно, что textarea примерно 60% занимает, а не все пространство...
    – Aleksey
    8 янв 2020 в 14:27
  • Когда я запускаю код здесь или в песочнице у меня все на 100% 8 янв 2020 в 14:28
  • @ПоляковРоман, можно картинку?
    – Aleksey
    8 янв 2020 в 14:29
  • ibb.co/1bMRRBX какой браузер у вас? 8 янв 2020 в 14:31

1 ответ 1

0

Вместо эпиграфа: Возможно, я не понимаю принципы CSS, и мой вопрос от неграмотности, но все же, для меня это странное поведение...

Ответ на вопрос - нужно добавить следующий стиль:

tr:nth-child(2) {
 height: 100%;
}

Исходный код, который я указал в вопросе правильно отображается в Chrome, а вот в любом FF результат как на картинке из вопроса.

Причина, table > tr > td > textarea, так вот tr тоже нужно установить height: 100%, только вот почему td со свойством height: 100%, но без этого же свойства у tr имеет 100% высоту?! Для меня это загадка...

4
  • Добавьте это в вопрос, не надо добавлять ответ, если это не является ответом на ваш вопрос 8 янв 2020 в 16:18
  • @ПоляковРоман, не знаю, я вначале вообще хотел удалить вопрос, но потом посчитал что это будет полезным может кому-то.
    – Aleksey
    8 янв 2020 в 17:28
  • если это не является ответом на ваш вопрос - вообще-то является. Установление height: 100% для tr как раз дает нужный эффект. НО, почему оно в Chrome и без того работает, когда в FF, я проверил под разными системами, и разными версиями браузера, так там результат как на картинке. Хотя, td при указании 100% высоты отлично работает и без указания того же у tr. Вот этого я не пойму. Магия браузера?
    – Aleksey
    8 янв 2020 в 17:32
  • @ПоляковРоман добавил CSS фрагмент, надеюсь, теперь лучше. Но, может все же кто-то объяснит поведение td, который вместо textarea нормально работает с height: 100%.
    – Aleksey
    8 янв 2020 в 17:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.