如果内容太小，则使html页面至少占据视口的100％

问题描述

这里不是那么经验丰富的开发人员

我目前正在使用“页眉-内容-页脚”设计的网页。

<html>
    <body>
        <div id="root">
            <div class="header">
                HEADER
            </div>
            <div class="content">
                CONTENT
            </div>
            <div class="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

标题是粘性div。像导航栏一样。
内容可以为任何大小。
页眉和页脚的高度固定。

我希望内容div占用剩余的页面空间，即使里面的内容不足以填充div。

这是我想出的CSS：

html,body,#root {
    min-height: 100vh;
}

body {
    margin: 0
}

.content {
    background-color: red;
    height: 100%;
}

.header {
    position: sticky;
    top: 0;
}

.header,.footer {
    height: 56px;
    width: 100%;
    line-height: 56px;
    background-color: green;
}

尽管这可以按预期工作，但当内容大于视口时，情况却并非如此。
在开发人员控制台中查看时， html，body和#root 标签的高度值正确地等于视口的100％，但 content div不会占用其余的视口空格（即使指定 height：100％）。

为什么会这样？

这是一个jsfiddle：https://jsfiddle.net/c91p0yot/

解决方法

使用flexbox布局模式，使您的<body> display: flex;

然后，为.content赋予flex的{{1}}值，这将迫使1占用所有剩余空间。

还摆脱了.content #root

div

将内容设置为至少是视口的高度减去页眉和页脚的高度。

html,body,#root {
    min-height: 100vh;
}

body {
    margin: 0
}

.content {
    background-color: red;
    min-height: calc(100vh - 112px);
}

.header {
    position: sticky;
    top: 0;
}

.header,.footer {
    height: 56px;
    width: 100%;
    line-height: 56px;
    background-color: #f8f9fa;
}

<body>
  <div id="root">
    <div class="header">
      HEADER
    </div>
    <div class="content">
      CONTENT
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>
</body>

html

如果内容太小，则使html页面至少占据视口的100％

问题描述

解决方法

相关问答