table displaying over footer

Question

How do I prevent the content of a long table or list from displaying over my footer if it takes up more than 100% of the height of the screen? I'd like the table to be responsive and take up the entire div. I've tried this answer but manually setting the bottom-margin did not help. My current ad-hoc solution is to manually limit the table height to prevent if from spilling over the footer. Below is the index.html that extends from base.html

/* style.css */

html {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  padding-bottom: 16px;
}

body {
  padding-bottom: 120px;
}

div#sp500Table.table-responsive {
  overflow-y: scroll;
  height: 500px;
}

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!--base.html -->

<body class="bg-dark text-white container-fluid">

  <header class="navbar navbar-expand-sm navbar-dark sticky-top bg-dark">
    ...
  </header>

  <main role="main">
    <div class="container-fluid d-flex">
      {% block body %} {% endblock %}
    </div>
  </main>

  <footer class="page-footer font-small fixed-bottom">
    <div class="container">
      ...
    </div>
  </footer>
</body>


<!-- index.html -->
{% extends 'base.html' %} {% block body %}
<div class="table-responsive" id="sp500Table">
  <table class="table table-light table-striped table-sm" id="sp500Table">
    <thead class="thead-light">
      <tr> {% for col in table_header %}
        <th>{{ col }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody> {% for num, r in enumerate(payload) %}
      <tr>
        <td>{{ num+1 }}</td>
        <td>{{ r.get('symbol') }}</td>
        <td>{{ r.get('security') }}</td>
        <td><a href="{{ r.get('sec_filings') }}" target="_blank">link</a></td>
        <td>{{ r.get('sector') }}</td>
        <td>{{ r.get('sub_sector') }}</td>
        <td>{{ r.get('headquarters') }}</td>
        <td>{{ r.get('date_first_added') }}</td>
      </tr> {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}

score 3 · Answer 1 · answered Jun 09 '21 at 22:30

3

Put the table into a div and add a height to the div. The add overflow: auto to the div. This will prevent table from taking up more space than you want and still allow you to scroll through all the page content.

answered Jun 09 '21 at 22:30

nightwolf555

327
1
14

My table is already inside a div and the style.css file has the overflow-y set. How can I set the height to be the remaining height of the page without setting it manually to 500px? – sat1017 Jun 09 '21 at 22:34
There are various ways to do it, you could use a percentage height for elements on your page using something like vh, or you could position your elements with flex box, you could also use css calc to come up with a custom calculation for your height, but I wouldnt reccoment the last one. – nightwolf555 Jun 09 '21 at 22:43
Could you update your answer with the first two options? I've found a 2010 question [https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space] and I am frozen by information overload. What I gathered was flex box is the modern approach and vh may? work with a unknown header and footer height if I use a div inside a div. – sat1017 Jun 09 '21 at 22:49

table displaying over footer

1 Answers1