划分HTML页面进入水平段，没有垂直滚动条

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; 
}

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

我试过margin-bottom: 50px;对main，但它没有奏效。我该怎么办？

来源

2013-10-08 Mehdi Emrani

“main”的高度应该是100％ - 50px。这是fiddle。

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

来源

2013-10-08 04:55:00 Hiral

这解决了我的问题，但“下面的功能是有风险的，并且可以在CR期间下降了： '钙（）'， '切换（）'， 'ATTR（）' “。 CSS值和单位模块级别3 - http://www.w3.org/TR/css3-values/ –

是的，我建议你应该保持头以％为基础。例如20％的头部，80％的身体其余部分。 – Hiral

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

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：你的头会比50像素小的唯一时间是在浏览器比500px的小（这将是只在某些景观的移动设备）

EXAMPLE

来源

2013-10-08 05:03:53 Thanos

为了使它在旧的浏览器上工作，您可以使用绝对定位。

Demo

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

来源

2013-10-31 02:39:09 Oriol

为什么downvote？它运行良好，即使在旧版浏览器中也是如此 – Oriol

划分HTML页面进入水平段，没有垂直滚动条

回答

相关问题