0

I'm making a mobile-friendly "score card" webpage. It has a form where you can enter your details and it will change the table of the scorecard. I want it to be as big as possible (to look nice), and for the form to be at the bottom. But if it gets too big, then it'll push off the form and mobile users will need to scroll down. I've tried some things at Make a div fill the height of the remaining screen space but I couldn't get any to work. Any ideas here?
The form should take up the regular amount of space, and the table should expand to fit the rest.

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>
KTibow
  • 495
  • 6
  • 18

1 Answers1

0

Try adding max-height to table and give overflow-y: scroll. This will keep the form visible.

shutupchigo
  • 703
  • 1
  • 7
  • 19
  • What should I put in max-height? I want it to be able to resize, not have a fixed height. – KTibow Apr 22 '20 at 00:09
  • Lets say you want table to take 50% height of the screen size and other 50% for form. You'd add table { max-height: 50vh; overflow-y: scroll } and form { max-height: 50vh;}; – shutupchigo Apr 22 '20 at 00:45
  • Got it. That will work. It's just that I want the form to take up the regular amount of space and I want the table to take up the rest. – KTibow Apr 22 '20 at 00:50