示例html页面未占用整个页面。只保留在顶部_Html_Css

示例html页面未占用整个页面。只保留在顶部

html css

示例html页面未占用整个页面。只保留在顶部,html,css,Html,Css,下面是HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Framework Test Page</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="grid"> &l

下面是HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Framework Test Page</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="grid">
    <div class="row">
      <div class="col-2">2 Columns</div>
      <div class="col-10">10 Columns</div>
    </div>
    <div class="row">
      <div class="col-3">3 Columns</div>
      <div class="col-9">9 Columns</div>
    </div>
    <div class="row">
      <div class="col-4">4 Columns</div>
      <div class="col-4">4 Columns</div>
      <div class="col-4">4 Columns</div>
    </div>
    <div class="row">
      <div class="col-3">3 Columns</div>
      <div class="col-6">6 Columns</div>
      <div class="col-3">3 Columns</div>
    </div>
  </div>
</body>
</html>

Chrome web浏览器显示如下

为什么页面底部是空的。我试着设置属性最大高度：css文件中网格类的100%，但没有任何区别。我使用的是chrome浏览器版本57.0.2987.133（64位）和操作系统Ubuntu 16.04（64位）。

试试这个：

html {
    height: 100%;
}

html{
身高：100%；
}
* {
边框：1px纯红！重要；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
.电网{
保证金：0自动；
最大宽度：1200px；
宽度：100%；
}
.行{
宽度：100%；
边缘底部：20px；
显示器：flex；
}
.col-1{
宽度：8.33%；
}
.col-2{
宽度：16.66%；
}
上校3{
宽度：25%；
}
.col-4{
宽度：33.33%；
}
上校5{
宽度：41.66%；
}
.col-6{
宽度：50%；
}
上校7{
宽度：58.33%；
}
.col-8{
宽度：66.66%；
}
.col-9{
宽度：75%；
}
上校10{
宽度：83.33%；
}
上校11{
宽度：91.66%；
}
上校12{
宽度：100%；
}


框架测试页面
2列
10列
3列
9列
4列
4列
4列
3列
6列
3列

如果希望页面始终至少与窗口一样高，则必须添加以下CSS：

html,
body {
  height: 100%;
  margin: 0;
}

注意：我还在下面的规则中添加了背景色以显示实际大小

您还可以添加

高度：100%

到

.grid

，但我不知道你是否真的想要

html，
身体{
身高：100%；
保证金：0；
背景：#eee；
}
* {
边框：1px纯红！重要；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
.电网{
保证金：0自动；
最大宽度：1200px；
宽度：100%；
}
.行{
宽度：100%；
边缘底部：20px；
显示器：flex；
}
.col-1{
宽度：8.33%；
}
.col-2{
宽度：16.66%；
}
上校3{
宽度：25%；
}
.col-4{
宽度：33.33%；
}
上校5{
宽度：41.66%；
}
.col-6{
宽度：50%；
}
上校7{
宽度：58.33%；
}
.col-8{
宽度：66.66%；
}
.col-9{
宽度：75%；
}
上校10{
宽度：83.33%；
}
上校11{
宽度：91.66%；
}
上校12{
宽度：100%；
}


框架测试页面
2列
10列
3列
9列
4列
4列
4列
3列
6列
3列

您是否使用任何css框架高度：100vh；对于Grid，我没有使用任何框架，而是播放HTML和链接CSS。我尝试过将高度设置为100%。输出是相同的。将高度：100%属性添加到html和body标记和。grid类确实增加了正文大小，边框位于底部，但网格内的内容（即带有类行的内容）保持不变。确定-您的网格类只有宽度设置，但没有高度设置，因此，他们只需根据内容自动调整高度（默认值为

auto

）。你可以添加高度设置，但一旦你添加的内容超过了它们的大小，这些设置就没有多大意义了。请注意我添加的第二个示例/代码段。正文高度确实增加了，但带类的div行仍然位于顶部。

html,
body {
  height: 100%;
  margin: 0;
}