调整网页大小时，页脚下方底部有空白

Question

我实际上有一个表，用于显示数据库中的数据。我正在使用引导程序来协助网站的设计。以下是显示问题的屏幕截图：https://i.stack.imgur.com/CUkjz.jpg

以下是HTML：http://pastie.org/p/2mPG3zE7b6AdHOuoJrMDZV以下是相关的CSS：http://pastie.org/p/14nCCfRGIA4WrFLXrFqNWe

我用paste.org发送它们，因为它们可能太大了，无法粘贴到stackoverflow 中

Answer 1

如果是一维数组布局，我建议您使用cssflex作为网站的基本模板(例如，单列头、体、脚(。

html,
body {
min-height: 100%;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #eee;
flex: 0 0 50px;
}
main {
background: #aaa;
flex: 1;
}
footer {
background: #888;
flex: 0 0 100px;
}

<div class="container">
<header>
HEAD
</header>
<main>
BODY
</main>
<footer>
FOOT
</footer>
</div>

如果它是一个二维数组(例如包含边栏(，那么我建议使用cssgrid作为基本模板。

HOLY GRAIL示例

.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
background: #eee;
grid-area: header;
}
nav {
background: #888;
grid-area: nav;
}
main {
background: #aaa;
grid-area: content;
}
aside {
background: #888;
grid-area: side;
}
footer {
background: #bbb;
grid-area: footer;
}

<div class="container">
<header>
HEAD
</header>
<nav>
NAV
</nav>
<main>
BODY
</main>
<aside>
SIDE
</aside>
<footer>
FOOT
</footer>
</div>