Why does the height adjust when only width changes?

Question

Here's my Fiddle. This is for an information kiosk style layout so I'm trying to make sure all content is visible on the screen. I'm also trying to account for a few different screen sizes so I'm using all height/width in percentage.

I want all of the .menu_item divs match the same height as #panel but the overall height on the .menu_item divs adjust as page width changes. If you take a look at the bottom border of .menu_item:last-child, and compare it with the bottom border of #panel, you'll see what I mean.

My goal with all of the .menu_item divs is to have 2% of total the #menu height between each .menu_item and then then the .menu_item divs would all have the same height and fill the rest of the content area of #menu (but not exceed it).

I'm looking to implement a solution only using html/css.

HTML:

<body>
    <div id="menu">
        <div id="item1" class="menu_item"></div>
        <div id="item2" class="menu_item"></div>
        <div id="item3" class="menu_item"></div>
        <div id="item4" class="menu_item"></div>
    </div>
    <div id="weather">
        <div id="panel"></div>
    </div>
</body>

CSS:

#menu, #weather {
    box-sizing: border-box;
    height: 100vh;
    margin: 0;
    padding: 2%;
}
#menu {
    float: left;
    width: 65%;
    padding-right: 1%;
}
#weather {
    float: right;
    width: 35%;
    padding-left: 1%;
}
.menu_item {
    width: 100%;
    height: 23.5%;
    margin-top: 2%;
    margin-bottom: 2%;
    border: solid black 0.2em;
}
.menu_item:first-child {
    margin-top: 0;
}
.menu_item:last_child {
    margin-bottom: 0;
}
#panel {
    border: solid black 0.2em;
    width: 100%;
    height: 100%;
}

possible duplicate of [Why are margin/padding percentages in CSS always calculated against width?](http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width) — Ulrich Schwarz, Apr 11 '15 at 18:55

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

Percentages in margin/padding are percentages of width, even for top and bottom values. (Similar question on SO, spec.)

If your goal is to have everything on the screen anyway, maybe you're interested in the vh unit, 1% of viewport height, supported in many modern browsers.)

edited May 23 '17 at 10:24

Community

1
1

answered Apr 11 '15 at 18:57

Ulrich Schwarz

7,598
1
36
48

Why does the height adjust when only width changes?

1 Answers1