Я создаю мобильную веб-страницу «Карточка с результатами». Он имеет форму, где вы можете ввести свои данные, и он изменит таблицу показателей. Я хочу, чтобы он был как можно большим (чтобы он выглядел красиво) и чтобы форма находилась внизу. Но если он станет слишком большим, то он вычеркнет sh из формы, и мобильные пользователи должны будут прокрутить вниз. Я попробовал кое-что на Сделать div заполнить высоту оставшегося пространства экрана , но я не мог заставить что-либо работать. Есть идеи?
Форма должна занимать обычное количество места, а таблица должна расширяться, чтобы соответствовать остальным.
html,
body,
table {
width: calc(100% - 8px);
height: calc(100% - 8px);
}
table,
th,
td {
border: 4px solid black;
border-collapse: collapse;
}
th,
td {
padding: 4px;
text-align: center;
font-family: Open Sans;
}
table {
margin: 9px;
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Score Card!</title>
<style>
</style>
</head>
<body>
<table>
<tr>
<th>Clue</th>
<th>A Cards</th>
<th>B Cards</th>
<th>C Cards</th>
<th>D Cards</th>
</tr>
<tr>
<th>1 Cards</th>
<td>?????</td>
<td>?????</td>
<td>?????</td>
<td>?????</td>
</tr>
<tr>
<th>2 Cards</th>
<td>?????</td>
<td>?????</td>
<td>?????</td>
<td>?????</td>
</tr>
<tr>
<th>3 Cards</th>
<td>?????</td>
<td>?????</td>
<td>?????</td>
<td>?????</td>
</tr>
<tr>
<th>4 Cards</th>
<td>?????</td>
<td>?????</td>
<td>?????</td>
<td>?????</td>
</tr>
</table>
<h1>Entry form goes here</h1>
</body>
</html>