How to stretch the table to fill all available space

Question

This question might be simple, but I cannot find an answer.

I have the following html:

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

and css:

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

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

How can I stretch the table vertically without change of the height property of div? I want the table to have height: 100% but it does not work because the outer containers do not have a fixed height (as I understand).

http://jsfiddle.net/8qedxug9/

Yes, but I have deep structure in real case, I cannot affect so many divs... Also if content is bigger than viewport I need scrolling. `Overflow: hidden` will break this ( — Serg046, Nov 16 '17 at 08:52
Add id to your div and then add your css to it. That way only specific div will be affected. — Hassan Imam, Nov 16 '17 at 08:53
@HassanImam something like this? http://jsfiddle.net/kobknbn7/ It does not work. It looks I need update height of all divs :( — Serg046, Nov 16 '17 at 08:56
It will affect all divs, It will force to inherit the value of body. So the same as just to set 100% height to all — Serg046, Nov 16 '17 at 09:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159134/discussion-between-hassan-imam-and-serg046). — Hassan Imam, Nov 16 '17 at 09:33

score 1 · Accepted Answer · answered Nov 16 '17 at 08:40

1

Give height: 100% to div element. In case you don't want scrolling, add overflow:hidden;.

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

div{
  height: 100%;
  overflow:hidden;
}

table {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background: red;
}

<div>
  some text
  <div>
    <table>
        <tr>
          <td>
            Test
          </td>
        </tr>
    </table>
  </div>
</div>

answered Nov 16 '17 at 08:40

Hassan Imam

21,956
5
41
51

1

Thanks for your answer. I've chosen this one https://stackoverflow.com/questions/1818467/how-to-apply-100-height-to-div – Serg046 Nov 16 '17 at 10:14

Zvezdas1989 · Answer 2 · 2017-11-16T08:41:51.250

0

To change height property to always have 100% of window height you should use view height CSS unit like this:

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

table {
    height: 95vh;
    margin: 0 auto;
    background: red;
    width: 100%;
}

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

edited Nov 16 '17 at 08:41

answered Nov 16 '17 at 08:33

Zvezdas1989

1,445
2
16
34

Sorry, I mean vertical space – Serg046 Nov 16 '17 at 08:34
You want to increase vertical space of table ? – Zvezdas1989 Nov 16 '17 at 08:34
Yes, I want table to have `height: 100%` But outer containers do not have fixed height and it does not work :( – Serg046 Nov 16 '17 at 08:35
Hmm, it looks as a right way. But scrolling is appeared. – Serg046 Nov 16 '17 at 08:40
Just use 95vh instead of 100 or use overflow: hidden – Zvezdas1989 Nov 16 '17 at 08:42
Good approach but it does not work in different resolution. Some content in div can take different vh height. So e.g. I have 5vh content in fullhd, but in hd it will take more space, maybe 8vh. Thanks for your time – Serg046 Nov 16 '17 at 08:48

Cactusman07 · Answer 3 · 2017-11-16T08:50:37.643

If an HTML element's default width and height is relative to its parent. So in this instance, the table is 100% of the height of its parent Div element. The Div that the table is in will therefore, also need to have a height of 100%.

In your Fiddle, adding a 100% height to all div's makes the div stretch to 100% of the body height, and thus the table stretch to 100% height also:

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

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

td {
    vertical-align: top;
}

barbarossa · Answer 4 · 2017-11-16T08:59:01.203

In order to declare the height of an element relatively (in %), you will need to declare the height of its parent element. So, you'll need to declare the heights of your divs:

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

CSS:

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

div {
  height: 100%;
}

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

How to stretch the table to fill all available space

4 Answers4