1

Code:

HTML

<body>
    <header>
        "..."
    </header>

    <main>
        <div class="searchBox">
            <table>
                "..."
            </table>
        </div>

        <div class="tableData">
            <table>
                "..."
            </table>
        </div>
    </main>
</body>

The searchBox is not important. I just put it there to show that there is something above my other table (tableData).

What I am trying to achieve is to get tableData to fill the rest of the screen height visible so no scroll bars are required.

I have researched and come across multiple solutions but none of these seem to work:

1. Set 'vh' property

Even though this goes off the viewport dimensions it's pretty good. However, I have a tabbed UI with all tabs having tableData displayed but at different positions on the page. This means that switching from tab to tab, tableData does not have time to render the new dimensions. Example sketch below:

enter image description here

So if I base the height of tableData on the image on the left where the content above is smaller, then the height of tableData will be too big and over-stretch on the other tab where the position of it has changed

2. Using absolute positioning

I immediately wrote this off as I also want my page to be responsive upon different devices and I understand that using absolute positioning can mess that up

3. Flexbox

I have been following this post for this method: Make a div fill the height of the remaining screen space

I have tried this approach but it removed all of my other CSS I had on the page.

What is the best way to achieve what I want?

Community
  • 1
  • 1
wmash
  • 4,032
  • 3
  • 31
  • 69
  • What does "it removed all of my other CSS" mean? Did you try other answers from that question like [css tables](http://stackoverflow.com/a/16960823/1529630) or [`calc()`](http://stackoverflow.com/a/23323175/1529630)? – Oriol Oct 07 '15 at 18:49
  • It removed all of the other styling on my page. I have attempted that CSS approach yes and did not make a difference. I have not tried `calc()` so will attempt that – wmash Oct 07 '15 at 19:13
  • Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – chrisweb Dec 26 '16 at 19:00
  • If it removed all your css you made have made a mistake, a fiddle would help us find out what exactly happend ... I flagged this as duplicate because the answer you linked contains a lot of possiblities to solve this problem, not just flexbox – chrisweb Dec 26 '16 at 19:03

1 Answers1

1

If you want to create the height of your divs with %'s, then all you have to do is set your html to 100%.

Here's how to do it:

html, body {
    height: 100%;
    margin: 0;
}

#searchBox {
    background-color: red;
    width: 100%;
    height: 20%;
}

#tableData {
    background-color: blue;
    width: 100%;
    height: 80%;
}

Here's the jsfiddle.

Update
added margin: 0; to html and body and updated the jsfiddle

Anthony
  • 1,439
  • 1
  • 19
  • 36