Свойство 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
, чтобы он занимал всю высоту ячейки?
textarea
примерно 60% занимает, а не все пространство...