Question

这是我的Fiddle。这是针对信息亭样式布局，因此我尝试确保所有内容在屏幕上都可见。我还尝试考虑几种不同的屏幕尺寸，因此我使用所有高度/宽度百分比。

我希望所有.menu_item div与#panel的高度相同，但.menu_item div的整体高度会随着页面宽度的变化而调整。如果您查看.menu_item：last-child的下边框，并将其与#panel的下边框进行比较，您就会明白我的意思。

我对所有.menu_item div的目标是在每个.menu_item之间的#menu高度总数的2％，然后.menu_item divs将具有相同的高度并填充＃的内容区域的其余部分菜单（但不超过它）。

我希望仅使用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%;
}

Answer 1

边距/填充的百分比是宽度的百分比，即使对于顶部和底部值也是如此。（Similar question on SO，spec。）

如果你的目标是在屏幕上显示所有内容，也许你对vh unit, 1% of viewport height, supported in many modern browsers.感兴趣

为什么只在宽度变化时调整高度？

1 个答案: