Question

有人可以帮我解释下面提到的插图吗？

<body>
    <header height="100px"></header>
    <main height="rest of the height of viewport"></main>
</body>

我希望<header>具有某个预定义的高度，但希望<main>抓住视口高度的其余部分。

注意：请不要使用JavaScript代码。

Answer 1

CSS

header {
    height: 100px;
}

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

这里发生的是，VH是您的视口高度。所以，我们应该将它减去标题高度。

工作小提琴：https://jsfiddle.net/y10p9atj/

希望它有所帮助。

Answer 2

尝试使用100PX减去其高度时自动调整任何分辨率 https://jsfiddle.net/samudrala/frw31kbh/

body {
  margin: 0;
  padding: 0;
  height:100vh;
}
header {
  height: 100px;
  width: 100%;
  background: #ff8800;
}
main {
  height: calc(100% - 100px);
  height:-webkit- calc(100% - 100px);
  height:-moz-calc(100% - 100px);
  width: 100%;
  background: green;
}

<body>
  <header></header>
  <main></main>
</body>

Answer 3

这也可以在css中使用flex box。但这不支持IE9等旧版浏览器。

<div class="flex">
  <header class="header"></header>
  <main class="flxGrow main"></main>
</div>

.flex{
  display:flex;
  flex-flow:column wrap;
  height:100%
}
.flxGrow{
  flex-grow:1;
}
.header{
  padding:20px;
  background:red;
}
.main{
  background:blue
}
body,html{
  height:100%;
  margin:0
}

使用flexbox而不是vh（垂直高度）的主要优点，无需计算标题的手动高度。任何动态标题高度都可灵活使用此解决方案。另请参阅小提琴here

动态高度设置

3 个答案: