Question

我正在尝试创建这样的东西：

HTML是：

<div id="container">
    <header></header>
    <main>
        <section class="half"></section>
        <section class="half"></section>
    </main>
</div>

CSS就是：

* {
    margin: 0; padding: 0;
}
html, body, #container {
    height: 100%;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: 100%;
    background: green;
}
.half {
    height: 50%;
}
.half:first-child {
    background: blue;
}
.half:last-child {
    background: yellow;
}

其中，我的顶部有一条细带，我想将屏幕的其余部分分成两个相等的部分，但我不希望出现垂直滚动条。

我为margin-bottom: 50px;尝试了main，但它没有用。我该怎么办？

Answer 1

“主”的高度应为100％ - 50px。这是fiddle。

main{height: calc(100% - 50px);}

Answer 2

要使其适用于旧浏览器，您可以使用绝对定位。

Demo

#container {
    position: relative;
}
main {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    background: green;
}

Answer 3

您已经在使用％来设置身高...为什么不再使用它来解决您的问题？

header {
    height: 10%;
    background: gray;
    max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
    height: 90%;
    background: green;
}

PS：标题小于50px的唯一时间是浏览器小于500px（仅在某些景观移动设备中）

<强> EXAMPLE

将HTML页面划分为水平部分，没有垂直滚动条

3 个答案: