<html>
<head>
<style>
.left { width:1px; }
.right { width:100%%; }
</style>
</head>
<body>
<form>
<table width="100%">
<tr>
<td class="left">Short</td>
<td><input class="right"></input></td>
</tr>
<tr>
<td class="left">Long</td>
<td><textarea class="right"></textarea></td>
</tr>
<tr>
<td></td>
<td><button class="right" type="submit">Send</button></td>
</tr>
</table>
</form>
</body>
</html>
Как растянуть среднюю строчку таблицы, чтобы textarea занимал всю доступную высоту окна?
Здравствуйте, BitField, Вы писали:
BF>BF><html>
BF><head>
BF> <style>
BF> .left { width:1px; }
BF> .right { width:100%%; }
BF> </style>
BF></head>
BF><body>
BF> <form>
BF> <table width="100%">
BF> <tr>
BF> <td class="left">Short</td>
BF> <td><input class="right"></input></td>
BF> </tr>
BF> <tr>
BF> <td class="left">Long</td>
BF> <td><textarea class="right"></textarea></td>
BF> </tr>
BF> <tr>
BF> <td></td>
BF> <td><button class="right" type="submit">Send</button></td>
BF> </tr>
BF> </table>
BF> </form>
BF></body>
BF></html>
BF>
BF>Как растянуть среднюю строчку таблицы, чтобы textarea занимал всю доступную высоту окна?
как вариант:
<html>
<head>
<style>
.left { width:1px; }
.right { width:100%%; }
</style>
</head>
<body>
<form style="height:*;">
<table width="100%" height="100%">
<tr>
<td class="left">Short</td>
<td><input class="right"></input></td>
</tr>
<tr style="height:*;">
<td class="left">Long</td>
<td><!--textarea class="right"></textarea-->
<div class="right" style="height:*;behavior:plaintext;overflow-y:scroll;border:1px solid threedshadow;"/></td>
</tr>
<tr>
<td></td>
<td><button class="right" type="submit">Send</button></td>
</tr>
</table>
</form>
</body>
</html>
... << RSDN@Home 1.2.0 alpha 5 rev. 1539>>
Здравствуйте, BitField, Вы писали:
Вообще-то таблица для этого не нужна. Можно и так:
<html>
<head>
<style>
form {
flow: "1 2"
"3 4"
"5 5"; /* 2x3 grid of blocks */
size:*; /* spans whole container */
border-spacing:4px;
}
form > widget {
width:*; /* spans available width */
}
form > widget[type=textarea] {
height:*; /* spans available height */
}
form > caption { text-align:right; }
form > .footer { text-align:center;}
</style>
</head>
<body>
<form>
<caption>Short</caption><widget type=text />
<caption>Long</caption><widget type=textarea />
<text class=footer><button type="submit">Send</button></text>
</form>
</body>
</html>
Если нужна именно таблица — свисти, с таблицей flex units тоже работают, покажу как.
