DIV inside DIV with 100% height minus margins

Question

I want to display two DIVs in one line. Each DIV should have another DIV inside. Internal DIVs should have the same height as external DIVs minus margins.

I can't set proper height to inside DIVs (bottom margin is ignored). Can you help me with that? jsFiddle: https://jsfiddle.net/gf53e0on/

<body>
    <div class="box"><div class="box-in"></div></div>
    <div class="box"><div class="box-in"></div></div>
</body>

body {
    position: fixed;
    width: 100%;
    border: none;
    display: table;
    table-layout: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
}

.box {
    border: none;
    display: table-cell;
    height: 100vh;
    background-color: yellow;
}

.box-in {
    border: solid 1px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    height: 100%;
}

score 0 · Answer 1 · answered Mar 14 '16 at 23:21

0

You can add padding to the bottom of your outer boxes. You also have to set box-sizing: border-box; so that this additional padding doesn't add to the height of the outer box.

So your box class becomes:

.box {
    border: none;
    display: table-cell;
    height: 100vh;
    background-color: yellow;
    box-sizing:border-box;
    padding-bottom:20px;
}

updated fiddle here

edited to add:

If you don't actually need to use margins on the inner box, you can remove them completely and just set a padding of 10px on the outer box with box-sizing:border-box on it.

another fiddle

answered Mar 14 '16 at 23:21

Will Jenkins

9,507
1
27
46

It doesn't work when I try to display something inside DIV with box-in class. – wwwww Mar 15 '16 at 00:25
Can you be a little less vague? – Will Jenkins Mar 15 '16 at 10:08

score 0 · Answer 2 · answered Mar 14 '16 at 23:31

0

Another option would be to use CSS3's calc to calculate the height minus the margins.

body {
    position: fixed;
    width: 100%;
    border: none;
    display: table;
    table-layout: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
}

.box {
    border: none;
    display: table-cell;
    height: 100vh;
    background-color: yellow;
}

.box-in {
    border: solid 1px;
    margin:10px;
  height: calc(100% - 20px);
}

    <div class="box"><div class="box-in"></div></div>
    <div class="box"><div class="box-in"></div></div>

answered Mar 14 '16 at 23:31

Aaron

10,187
3
23
39

It doesn't work when I try to display something inside DIV with box-in class. – wwwww Mar 15 '16 at 00:25
What happens when you add content to the `
` @blaballong – Aaron Mar 15 '16 at 09:31

DIV inside DIV with 100% height minus margins

2 Answers2