为什么我不能从CSS Grid Layout中删除所有死区? [英] Why can't I remove all the deadspace from CSS Grid Layout?
本文介绍了为什么我不能从CSS Grid Layout中删除所有死区?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
/* http://meyerweb.com/eric/tools/css/reset/v2.0 |20110126许可证:无(公共领域)*/html，身体，div，跨度，小程序，目的，iframe，h1h2h3，h4，h5，h6，p，块引用，前一种，缩写首字母缩写，地址，大的，引用，代码，德尔，dfn，他们img，ins，kbd，qs样品小的，罢工，强的，子SUP，ttvar，b，你一世，中央，dl，dtdd哦，ul，，字段集形式，标签，传奇，桌子，标题，身体TFOOT，剧情trth，td文章，在旁边，帆布，细节，嵌入数字，无标题，页脚，标头hgroup，菜单，导航输出，红宝石，部分，概括，时间，标记，声音的，视频 {边距:0;填充:0;边界:0;字体大小:100％；font:继承;垂直对齐:基线；}/*为旧版浏览器重置HTML5显示角色*/文章，在旁边，细节，无标题，数字，页脚，标头hgroup，菜单，导航部分 {显示:块；}身体 {行高:1；}哦，ul {列表样式:无；}块引用，q {引号:无；}引用:之前，blockquote:之后，问:之前，q:{内容: '';内容:无；}桌子 {边界崩溃:崩溃；边框间距:0；}/* CSS重置结束***********************************************************************//*字体*/@ font-face {字体家族:"parisr"；src:网址(fonts/parisr.woff)格式("woff")，网址(fonts/parisr.eot)格式("eot")，网址(fonts/parisr.svg)格式("svg")，网址(fonts/parisr.ttf)format("ttf");字体样式:正常；字体粗细:100；}身体 {字体家族:"parisr"，Arial，无衬线；}html {背景颜色:#236841;}身体 {背景颜色:白色；}/*将页脚放在底部*/* {框大小:border-box；}*:前，*:后 {框大小:border-box；}html，身体 {高度:100％;职位:相对}.grid-container {最低高度:100vh；/*将覆盖视口的100％*/溢出:隐藏；显示:块；职位:相对padding-bottom:100px;/*页脚高度*/}页脚{位置:绝对；底部:0;宽度:100％;}/*电脑屏幕的边距*/身体 {左边距:150px;右边距:150px；}/* CSS网格布局*/.grid-container {显示:网格；grid-template-columns:自动；grid-template-rows:1fr 1fr 1fr;网格模板区域:页眉"，主"，页脚"；}.header {显示:网格；网格模板列:30％70％；grid-template-rows:自动自动;grid-template-areas:徽标顶部链接"徽标mainnav";网格区域:标头；}.商标 {网格区域:徽标；边距:25px自动自动;}.top-links {网格区域:顶部链接；}ul li {list-style-type:无；显示:内联；}ul li a {文字修饰:无；}ul#top-links {文字对齐:右；顶部填充:1％；}ul#top-links li {填充:14px 16px;颜色:黑色;}.mainnav {网格区域:mainnav；}/*所有页面上的导航栏*/.mainnav {背景颜色:#333；溢出:隐藏；}.mainnav a {向左飘浮;颜色:#f2f2f2;文本对齐:居中；填充:14px 16px;文字修饰:无；字号:17px；}.mainnav a:hover {背景颜色:#ddd;颜色:黑色;}.mainnav a.active {背景颜色:#4CAF50；白颜色;}/*书籍下拉菜单*/.落下 {向左飘浮;溢出:隐藏；}.dropdown .dropbtn {font-size:16px;边界:无；大纲:无；白颜色;填充:14px 16px;background-color:继承；font-family:继承；边距:0;}.navbar a:悬停，.dropdown:hover .dropbtn {背景颜色:#236841;}.dropdown-content {显示:无；位置:绝对；背景颜色:#f9f9f9;最小宽度:160像素；box-shadow:0px 8px 16px 0px rgba(0，0，0，0.2);z索引:1；}.dropdown-content a {浮动:无；颜色:黑色;内边距:12px 16px;文字修饰:无；显示:块；文字对齐:左；}.dropdown-content a:hover {背景颜色:#ddd;}.dropdown:悬停.dropdown-content {显示:块；}/*头尾CSS */.主要的 {网格区域:主要；}.footer {网格区域:页脚；}/* 主页 */.指数 {显示:网格；grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"topindex""bottomindex";网格区域:主要；}.topindex {显示:网格；grid-template-columns:1fr 1fr;grid-template-area:视频""bookmonth"；}.bottomindex {显示:网格；grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-gap:1px 1px;grid-template-areas:买书卖书有价书"；}.视频 {网格区域:视频；填充:0px 25px 0px;}.bookmonth {网格区域:读书月；填充:0px 25px 0px;}.buybooks {网格区域:购书本；填充:0px 25px 0px;}.sellbooks {网格区域:销售簿；填充:0px 25px 0px;}.valuebooks {网格区域:资产负债表；填充:0px 25px 0px;}.column h4 {} <！DOCTYPE html>< html>< head>< meta charset ="UTF-8">< title>象征收藏书籍</title>< link rel ="stylesheet" href ="stylesheet.css" media ="all"></head><身体>< div class ="grid-container">< header>< div class ="header">< div class ="logo">< img src ="media/emblem_logo_128.png" id ="logo">< p id ="logotext">象征稀有的珍藏书籍</p></div>< div class ="top-links">< ul id ="top-links">< li>< a href ="contactus.html">与我们联系</a></li>< li>< a href =#">辅助功能</a></li>< li>< a href =#">登录</a></li></ul></div>< div class ="mainnav">< ul id ="mainnav" role ="nav">< li>< a href ="index.html"> Home</a></li>< li class ="dropdown">< button class ="dropbtn">书< i class ="fa fa-caret-down"></i></button>< div class ="dropdown-content">< a href =#"> 20世纪书籍</a>< a href ="19century.html"> 19th Century Books</a>< a href =#"> 18世纪书籍</a>< a href =#">善本</a></div></li>< li>< a href ="delivery.html">交付</a></li>< li>< a href =#">关于我们</a></li>< li>< a href =">作为投资的图书</a></li></ul></div></div></header>< main class ="content">< h1>欢迎使用徽章珍藏书</h1>< div class ="topindex">< section>< div class ="video">< video id ="homevideo" width ="100％" height ="100％"控件>< source src ="/media/emblem_video_480x360.webm" type ="video/webm"/>< source src ="/media/emblem_video_480x360.mp4" type ="video/mp4"/>< source src ="/media/emblem_video_480x360.ogg" type ="video/ogg"/>< p>很抱歉，您的浏览器不支持该视频.</video></div></section>< section>< div class ="bookmonth">< h4>本月书</h4>< img src ="media/heart_of_the_matter.jpg" alt =事务的重点" id ="bookmonthimg">< p>重要事项Graham Greene 1900版.此版本中仅有的50种出版物之一.原始的蓝色布料状况良好，封面上印有出版商的设备.这本书代表了一笔非凡的投资，预计在未来三年内，其价值将升值6％.</p></div></section></div>< div class ="bottomindex">< div class ="buybooks">< article class ="column">< h4>购买稀有书</h4>< p>象征总是在寻找购买稀有书籍.我们为适当的书籍提供极具竞争力的价格.您需要做的就是与我们联系，以获取您要出售的书或藏书的详细信息.我们将需要了解以下信息，</p></article></div>< div class ="sellbooks">< article class ="column">< h4>畅销书籍</h4>< p>象征出售稀有且可收藏的小说和诗歌.我们对18和19世纪的书籍特别感兴趣，并拥有享誉全球的19世纪后期女性作品.特别令人感兴趣的是第一版，私人印刷版和作者签名的副本.我们还提供修复服务，以及有关稀有书籍投资的咨询.我们每年发行两次印刷和插图的稀有书籍目录.我们还在英国，新西兰，加拿大和美国的书展上展出.</p></article></div>< div class ="valuebooks">< article class ="column">< h4>重视书籍</h4>< p>如果您希望出售书籍，则可以采用最正式的估价方法.Emblem出于保险目的或个人利益进行书面评估.我们可以评估单个书籍或收藏.</p>< p>如果您希望对一本书进行估价，则建议对该书是否可能具有足够的价值以进行全面估价的免费初始口头评估.如果您决定继续进行评估，则Emblem会在完全执行评估之前为您提供成本估算.评估工作的费用为半天300英镑.</article></div></div></main>< footer>< ul id ="footer">< li>< a class ="url" href =#">隐私权</a></li>< li>< a class ="url" href =#">条款和条件</a></li>< li>< a class ="url" href =#"> Returns</a></li></ul></footer></div></body></html> 我已经使用浏览器开发人员工具检查了该页面.好的，看起来空间来自头部设置.我没有设置任何会影响底部的属性，所以我现在真的很困惑.
我已经尝试将padding/margin设置为0，但是它没有任何改变.还尝试过将设置为自动的某些属性设置为无效.
任何建议将不胜感激.
这是HTML:
<！DOCTYPE html>< html>< head>< meta charset ="UTF-8">< title>象征收藏书籍</title>< link rel ="stylesheet" href ="stylesheet.css" media ="all"></head><身体>< div class ="grid-container">< header>< div class ="header">< div class ="logo">< img src ="media/emblem_logo_128.png" id ="logo">< p id ="logotext">象征稀有的珍藏书籍</p></div>< div class ="top-links">< ul id ="top-links">< li>< a href ="contactus.html">与我们联系</a></li>< li>< a href =#">辅助功能</a></li>< li>< a href =#">登录</a></li></ul></div>< div class ="mainnav">< ul id ="mainnav" role ="nav">< li>< a href ="index.html"> Home</a></li>< li class ="dropdown">< button class ="dropbtn">书< i class ="fa fa-caret-down"></i></button>< div class ="dropdown-content">< a href =#"> 20世纪书籍</a>< a href ="19century.html"> 19th Century Books</a>< a href =#"> 18世纪书籍</a>< a href =#">善本</a></div></li>< li>< a href ="delivery.html">交付</a></li>< li>< a href =#">关于我们</a></li>< li>< a href =">作为投资的图书</a></li></ul></div></div></header>< main class ="content">< h1>欢迎使用徽章珍藏书</h1>< div class ="topindex">< section>< div class ="video">< video id ="homevideo" width ="100％" height ="100％"控件>< source src ="/media/emblem_video_480x360.webm" type ="video/webm"/>< source src ="/media/emblem_video_480x360.mp4" type ="video/mp4"/>< source src ="/media/emblem_video_480x360.ogg" type ="video/ogg"/>< p>很抱歉，您的浏览器不支持该视频.</video></div></section>< section>< div class ="bookmonth">< h4>本月书</h4>< img src ="media/heart_of_the_matter.jpg" alt =事务的重点" id ="bookmonthimg">< p>重要事项Graham Greene 1900版.此版本中仅有的50种出版物之一.原始的蓝色布料状况良好，封面上印有出版商的设备.这本书代表了一笔非凡的投资，预计在未来三年内，其价值将升值6％.</p></div></section></div>< div class ="bottomindex">< div class ="buybooks">< article class ="column">< h4>购买稀有书</h4>< p>象征总是在寻找购买稀有书籍.我们为适当的书籍提供极具竞争力的价格.您需要做的就是与我们联系，以获取您要出售的书或藏书的详细信息.我们将需要了解以下信息，</p></article></div>< div class ="sellbooks">< article class ="column">< h4>畅销书籍</h4>< p>象征出售稀有且可收藏的小说和诗歌.我们对18和19世纪的书籍特别感兴趣，并拥有享誉全球的19世纪后期女性作品.特别令人感兴趣的是第一版，私人印刷版和作者签名的副本.我们还提供修复服务，以及有关稀有书籍投资的咨询.我们每年发行两次印刷和插图的稀有书籍目录.我们还在英国，新西兰，加拿大和美国的书展上展出.</p></article></div>< div class ="valuebooks">< article class ="column">< h4>重视书籍</h4>< p>如果您希望出售书籍，则可以采用最正式的估价方法.Emblem出于保险目的或个人利益进行书面评估.我们可以评估单个书籍或收藏.</p>< p>如果您希望对一本书进行估价，则建议对该书是否可能具有足够的价值以进行全面估价的免费初始口头评估.如果您决定继续进行评估，则Emblem会在完全执行评估之前为您提供成本估算.评估工作的费用为半天300英镑.</article></div></div></main>< footer>< ul id ="footer">< li>< a class ="url" href =#">隐私权</a></li>< li>< a class ="url" href =#">条款和条件</a></li>< li>< a class ="url" href =#"> Returns</a></li></ul></footer></div></body></html> 这是CSS:
/* http://meyerweb.com/eric/tools/css/reset/v2.0 |20110126许可证:无(公共领域)*/html，身体，div，跨度，小程序，目的，iframe，h1h2h3，h4，h5，h6，p，块引用，前一种，缩写首字母缩写，地址，大的，引用，代码，德尔，dfn，他们img，ins，kbd，qs样品小的，罢工，强的，子SUP，ttvar，b，你一世，中央，dl，dtdd哦，ul，，字段集形式，标签，传奇，桌子，标题，身体TFOOT，剧情trth，td文章，在旁边，帆布，细节，嵌入数字，无标题，页脚，标头hgroup，菜单，导航输出，红宝石，部分，概括，时间，标记，声音的，视频 {边距:0;填充:0;边界:0;字体大小:100％；font:继承;垂直对齐:基线；}/*为旧版浏览器重置HTML5显示角色*/文章，在旁边，细节，无标题，数字，页脚，标头hgroup，菜单，导航部分 {显示:块；}身体 {行高:1；}哦，ul {列表样式:无；}块引用，q {引号:无；}引用:之前，blockquote:之后，问:之前，q:{内容: '';内容:无；}桌子 {边界崩溃:崩溃；边框间距:0；}/* CSS重置结束***********************************************************************//*字体*/@ font-face {字体家族:"parisr"；src:网址(fonts/parisr.woff)格式("woff")，网址(fonts/parisr.eot)格式("eot")，网址(fonts/parisr.svg)格式("svg")，网址(fonts/parisr.ttf)format("ttf");字体样式:正常；字体粗细:100；}身体 {字体家族:"parisr"，Arial，无衬线；}html {背景颜色:#236841;}身体 {背景颜色:白色；}/*将页脚放在底部*/* {框大小:border-box；}*:前，*:后 {框大小:border-box；}html，身体 {高度:100％;职位:相对}.grid-container {最低高度:100vh；/*将覆盖视口的100％*/溢出:隐藏；显示:块；职位:相对padding-bottom:100px;/*页脚高度*/}页脚{位置:绝对；底部:0;宽度:100％;}/*电脑屏幕的边距*/身体 {左边距:150px;右边距:150px；}/* CSS网格布局*/.grid-container {显示:网格；grid-template-columns:自动；grid-template-rows:1fr 1fr 1fr;网格模板区域:页眉"，主"，页脚"；}.header {显示:网格；网格模板列:30％70％；grid-template-rows:自动自动;grid-template-areas:徽标顶部链接"徽标mainnav";网格区域:标头；}.商标 {网格区域:徽标；边距:25px自动自动;}.top-links {网格区域:顶部链接；}ul li {list-style-type:无；显示:内联；}ul li a {文字修饰:无；}ul#top-links {文字对齐:右；顶部填充:1％；}ul#top-links li {填充:14px 16px;颜色:黑色;}.mainnav {网格区域:mainnav；}/*所有页面上的导航栏*/.mainnav {背景颜色:#333；溢出:隐藏；}.mainnav a {向左飘浮;颜色:#f2f2f2;文本对齐:居中；填充:14px 16px;文字修饰:无；font-size:17px;}.mainnav a:hover {背景颜色:#ddd;颜色:黑色;}.mainnav a.active {背景颜色:#4CAF50；白颜色;}/*书籍下拉菜单*/.落下 {向左飘浮;溢出:隐藏；}.dropdown .dropbtn {font-size:16px;边界:无；大纲:无；白颜色;填充:14px 16px;background-color:继承；font-family:继承；边距:0;}.navbar a:悬停，.dropdown:hover .dropbtn {背景颜色:#236841;}.dropdown-content {显示:无；位置:绝对；背景颜色:#f9f9f9;最小宽度:160像素；box-shadow:0px 8px 16px 0px rgba(0，0，0，0.2);z索引:1；}.dropdown-content a {浮动:无；颜色:黑色;内边距:12px 16px;文字修饰:无；显示:块；文字对齐:左；}.dropdown-content a:hover {背景颜色:#ddd;}.dropdown:hover .dropdown-content {显示:块；}/*头尾CSS */.主要的 {网格区域:主要；}.footer {网格区域:页脚；}/* 主页 */.指数 {显示:网格；grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"topindex""bottomindex";网格区域:主要；}.topindex {显示:网格；grid-template-columns:1fr 1fr;grid-template-area:视频""bookmonth"；}.bottomindex {显示:网格；grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-gap:1px 1px;grid-template-areas:买书卖书有价书"；}.视频 {网格区域:视频；填充:0px 25px 0px;}.bookmonth {网格区域:读书月；填充:0px 25px 0px;}.buybooks {网格区域:购书本；填充:0px 25px 0px;}.sellbooks {网格区域:销售簿；填充:0px 25px 0px;}.valuebooks {网格区域:资产负债表；填充:0px 25px 0px;}.column h4 {}/*图书*/.books {显示:网格；grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;网格模板区域:"article1 picture1""picture2 article2""article3 picture3"；网格区域:书籍；}.第1条 {网格区域:第1条；}.图片1 {网格区域:picture1；}.picture2 {网格区域:picture2;}.article2 {网格区域:第2条；}.article3 {网格区域:第3条；}.picture3 {网格区域:picture3;}/*送货需要样式*/.交货 {显示:网格；grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr;网格模板区域:简介"，表格"，文章"；网格区域:交付；}.intro，.table，.article {填充:0％25％0％;}.介绍 {网格区域:简介；}.桌子 {网格区域:表格；}.文章 {网格区域:文章；}/*与我们联系需要样式*/形式 {显示:网格；grid-template-columns:1fr;grid-template-rows:repeat(7，auto);网格模板区域:标题"名称"电子邮件"自然"信息"提交";栅隙:0.8rem 0.5rem;背景:#EEE；填充:1rem;边框:2px实心#7E7E7E;底边距:2rem;}#标题 {网格区域:标题；}#名称 {网格区域:名称；}#电子邮件 {网格区域:电子邮件；}#自然 {网格区域:自然；}#信息 {网格区域:消息；}#提交 {网格区域:提交；}标签 {显示:块；}textarea {宽度:100％;高度:8rem;}按钮 {背景:#444；颜色:#FFF；填充:1rem;}输入，选择{宽度:90％;填充:0.5rem;边距:0.5rem 0;}栏位{边框:1px实线#A8A8A8;}#联系表 {保证金:0％25％0％;}/* 19世纪需要图像和样式*/#19centurybooks {显示:网格；grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;grid-gap:1px 1px;网格模板区域:"article1 picture1""picture2 article2""article3 picture3""picture4 article4""article5 picture5""picture6 article6"；}.第1条 {网格区域:第1条；}.article2 {网格区域:第2条；}.article3 {网格区域:第3条；}.article4 {网格区域:第4条；}.article5 {网格区域:第5条；}.article6 {网格区域:第6条；}.图片1 {网格区域:picture1；}.picture2 {网格区域:picture2;}.picture3 {网格区域:picture3;}.picture4 {网格区域:picture4;}.picture5 {网格区域:picture5;}.picture6 {网格区域:picture6;}/*较小屏幕尺寸的媒体查询*/@媒体 也可以随时批评我的代码.我仍在学习，可以提供任何反馈.
解决方案
我检查了您的代码段.当您使用 grid-template-rows:1fr 1fr 1fr; 时，会产生问题.我强烈建议您阅读
以全页视图查看代码段.
/* http://meyerweb.com/eric/tools/css/reset/v2.0 |20110126许可证:无(公共领域)*/html，身体，div，跨度，小程序，目的，iframe，h1h2h3，h4，h5，h6，p，块引用，前一种，缩写首字母缩写，地址，大的，引用，代码，德尔，dfn，他们img，ins，kbd，qs样品小的，罢工，强的，子SUP，ttvar，b，你一世，中央，dl，dtdd哦，ul，，字段集形式，标签，传奇，桌子，标题，身体TFOOT，剧情trth，td文章，在旁边，帆布，细节，嵌入数字，无标题，页脚，标头hgroup，菜单，导航输出，红宝石，部分，概括，时间，标记，声音的，视频 {边距:0;填充:0;边界:0;字体大小:100％；font:继承;垂直对齐:基线；}/*为旧版浏览器重置HTML5显示角色*/文章，在旁边，细节，无标题，数字，页脚，标头hgroup，菜单，导航部分 {显示:块；}身体 {行高:1；}哦，ul {列表样式:无；}块引用，q {引号:无；}引用:之前，blockquote:之后，问:之前，q:{内容: '';内容:无；}桌子 {边界崩溃:崩溃；边框间距:0；}/* CSS重置结束***********************************************************************//*字体*/@ font-face {字体家族:"parisr"；src:网址(fonts/parisr.woff)格式("woff")，网址(fonts/parisr.eot)格式("eot")，网址(fonts/parisr.svg)格式("svg")，网址(fonts/parisr.ttf)format("ttf");字体样式:正常；字体粗细:100；}身体 {字体家族:"parisr"，Arial，无衬线；}html {背景颜色:#236841;}身体 {背景颜色:白色；}/*将页脚放在底部*/* {框大小:border-box；}*:前，*:后 {框大小:border-box；}html，身体 {高度:100％;职位:相对}.grid-container {最低高度:100vh；/*将覆盖视口的100％*/溢出:隐藏；显示:块；职位:相对/* padding-bottom:100px; *//*页脚高度*/}/*页脚{位置:绝对；底部:0;宽度:100％;} *//*电脑屏幕的边距*/身体 {左边距:150px;右边距:150px；}/* CSS网格布局*/.grid-container {显示:网格；grid-template-columns:1fr;grid-template-rows:自动1fr自动;网格模板区域:页眉"，主"，页脚"；}.header {显示:网格；网格模板列:30％70％；grid-template-rows:自动自动;grid-template-areas:徽标顶部链接"徽标mainnav";网格区域:标头；}.商标 {网格区域:徽标；边距:25px自动自动;}.top-links {网格区域:顶部链接；}ul li {list-style-type:无；显示:内联；}ul li a {文字修饰:无；}ul#top-links {文字对齐:右；顶部填充:1％；}ul#top-links li {填充:14px 16px;颜色:黑色;}.mainnav {网格区域:mainnav；}/*所有页面上的导航栏*/.mainnav {背景颜色:#333；溢出:隐藏；}.mainnav a {向左飘浮;颜色:#f2f2f2;文本对齐:居中；填充:14px 16px;文字修饰:无；font-size:17px;}.mainnav a:hover {背景颜色:#ddd;颜色:黑色;}.mainnav a.active {背景颜色:#4CAF50；白颜色;}/*书籍下拉菜单*/.落下 {向左飘浮;溢出:隐藏；}.dropdown .dropbtn {font-size:16px;边界:无；大纲:无；白颜色;填充:14px 16px;background-color:继承；font-family:继承；边距:0;}.navbar a:悬停，.dropdown:hover .dropbtn {背景颜色:#236841;}.dropdown-content {显示:无；位置:绝对；背景颜色:#f9f9f9;最小宽度:160像素；box-shadow:0px 8px 16px 0px rgba(0，0，0，0.2);z索引:1；}.dropdown-content a {浮动:无；颜色:黑色;内边距:12px 16px;文字修饰:无；显示:块；文字对齐:左；}.dropdown-content a:hover {背景颜色:#ddd;}.dropdown:hover .dropdown-content {显示:块；}/*头尾CSS */.主要的 {网格区域:主要；}.footer {网格区域:页脚；}/* 主页 */.指数 {显示:网格；grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"topindex""bottomindex";网格区域:主要；}.topindex {显示:网格；grid-template-columns:1fr 1fr;grid-template-area:视频""bookmonth"；}.bottomindex {显示:网格；grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-gap:1px 1px;grid-template-areas:买书卖书有价书"；}.视频 {网格区域:视频；填充:0px 25px 0px;}.bookmonth {网格区域:读书月；填充:0px 25px 0px;}.buybooks {网格区域:购书本；填充:0px 25px 0px;}.sellbooks {网格区域:销售簿；填充:0px 25px 0px;}.valuebooks {网格区域:资产负债表；填充:0px 25px 0px;}.column h4 {} <！DOCTYPE html>< html>< head>< meta charset ="UTF-8">< title>象征收藏书籍</title>< link rel ="stylesheet" href ="stylesheet.css" media ="all"></head><身体>< div class ="grid-container">< header>< div class ="header">< div class ="logo">< img src ="media/emblem_logo_128.png" id ="logo">< p id ="logotext">象征稀有的珍藏书籍</p></div>< div class ="top-links">< ul id ="top-links">< li>< a href ="contactus.html">与我们联系</a></li>< li>< a href =#">辅助功能</a></li>< li>< a href =#">登录</a></li></ul></div>< div class ="mainnav">< ul id ="mainnav" role ="nav">< li>< a href ="index.html"> Home</a></li>< li class ="dropdown">< button class ="dropbtn">书< i class ="fa fa-caret-down"></i></button>< div class ="dropdown-content">< a href =#"> 20世纪书籍</a>< a href ="19century.html"> 19th Century Books</a>< a href =#"> 18世纪书籍</a>< a href =#">善本</a></div></li>< li>< a href ="delivery.html">交付</a></li>< li>< a href =#">关于我们</a></li>< li>< a href =">作为投资的书</a></li></ul></div></div></header>< main class ="content">< h1>欢迎使用徽章珍藏书</h1>< div class ="topindex">< section>< div class ="video">< video id ="homevideo" width ="100％" height ="100％"控件>< source src ="/media/emblem_video_480x360.webm" type ="video/webm"/>< source src ="/media/emblem_video_480x360.mp4" type ="video/mp4"/>< source src ="/media/emblem_video_480x360.ogg" type ="video/ogg"/>< p>很抱歉，您的浏览器不支持该视频.</video></div></section>< section>< div class ="bookmonth">< h4>本月书</h4>< img src ="media/heart_of_the_matter.jpg" alt =事务的重点" id ="bookmonthimg">< p>重要事项Graham Greene 1900版.此版本中仅有的50种出版物之一.原始的蓝色布料状况良好，封面上印有出版商的设备.这本书代表了一笔非凡的投资，预计在未来三年内，其价值将升值6％.</p></div></section></div>< div class ="bottomindex">< div class ="buybooks">< article class ="column">< h4>购买稀有书</h4>< p>象征总是在寻找购买稀有书籍.我们为适当的书籍提供极具竞争力的价格.您需要做的就是与我们联系，以获取您要出售的书或藏书的详细信息.我们将需要了解以下信息，</p></article></div>< div class ="sellbooks">< article class ="column">< h4>畅销书籍</h4>< p>象征出售稀有且可收藏的小说和诗歌.我们对18和19世纪的书籍特别感兴趣，并拥有享誉全球的19世纪后期女性作品.特别令人感兴趣的是第一版，私人印刷版和作者签名的副本.我们还提供修复服务，以及有关稀有书籍投资的咨询.我们每年发行两次印刷和插图的稀有书籍目录.我们还在英国，新西兰，加拿大和美国的书展上展出.</p></article></div>< div class ="valuebooks">< article class ="column">< h4>重视书籍</h4>< p>如果您希望出售书籍，则可以采用最正式的估价方法.Emblem出于保险目的或个人利益进行书面评估.我们可以评估单个书籍或收藏.</p>< p>如果您希望对一本书进行估价，则建议对该书是否可能具有足够的价值以进行全面估价的免费初始口头评估.如果您决定继续进行评估，则Emblem会在完全执行评估之前为您提供成本估算.评估工作的费用为半天300英镑.</article></div></div></main>< footer>< ul id ="footer">< li>< a class ="url" href =#">隐私权</a></li>< li>< a class ="url" href =#">条款和条件</a></li>< li>< a class ="url" href =#"> Returns</a></li></ul></footer></div></body></html> /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* END OF CSS RESET
*******************************************************************/
/* font */
@font-face {
font-family: "parisr";
src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
font-style: normal;
font-weight: 100;
}
body {
font-family: "parisr", Arial, sans-serif;
}
html {
background-color: #236841;
}
body {
background-color: white;
}
/* keep the footer at bottom */
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
position: relative;
}
.grid-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
/* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
/* margin for computer screens */
body {
margin-left: 150px;
margin-right: 150px;
}
/* CSS Grid Layout */
.grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header""main""footer";
}
.header {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: auto auto;
grid-template-areas: "logo top-links""logo mainnav";
grid-area: header;
}
.logo {
grid-area: logo;
margin: 25px auto auto;
}
.top-links {
grid-area: top-links;
}
ul li {
list-style-type: none;
display: inline;
}
ul li a {
text-decoration: none;
}
ul#top-links {
text-align: right;
padding-top: 1%;
}
ul#top-links li {
padding: 14px 16px;
color: black;
}
.mainnav {
grid-area: mainnav;
}
/* Navigation bar across all pages*/
.mainnav {
background-color: #333;
overflow: hidden;
}
.mainnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.mainnav a:hover {
background-color: #ddd;
color: black;
}
.mainnav a.active {
background-color: #4CAF50;
color: white;
}
/*dropdown for the books */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #236841;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* END OF HEADER CSS */
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* home page */
.index {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "topindex""bottomindex";
grid-area: main;
}
.topindex {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "video""bookmonth";
}
.bottomindex {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 1px 1px;
grid-template-areas: "buybooks sellbooks valuebooks";
}
.video {
grid-area: video;
padding: 0px 25px 0px;
}
.bookmonth {
grid-area: bookmonth;
padding: 0px 25px 0px;
}
.buybooks {
grid-area: buybooks;
padding: 0px 25px 0px;
}
.sellbooks {
grid-area: sellbooks;
padding: 0px 25px 0px;
}
.valuebooks {
grid-area: valuebooks;
padding: 0px 25px 0px;
}
.column h4 {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Emblem Collectible Books</title>
<link rel="stylesheet" href="stylesheet.css" media="all">
</head>
<body>
<div class="grid-container">
<header>
<div class="header">
<div class="logo">
<img src="media/emblem_logo_128.png" id="logo">
<p id="logotext">Emblem Rare, Collectible Books</p>
</div>
<div class="top-links">
<ul id="top-links">
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="mainnav">
<ul id="mainnav" role="nav">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">20th Century Books</a>
<a href="19century.html">19th Century Books</a>
<a href="#">18th Century Books</a>
<a href="#">Rare Books</a>
</div>
</li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="">Books as an Investment</a></li>
</ul>
</div>
</div>
</header>
<main class="content">
<h1>Welcome to Emblem Collectible Books</h1>
<div class="topindex">
<section>
<div class="video">
<video id="homevideo" width="100%" height="100%" controls>
<source src="/media/emblem_video_480x360.webm" type="video/webm" />
<source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
<source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
<p>Sorry, your browser does not support this video.</p>
</video>
</div>
</section>
<section>
<div class="bookmonth">
<h4>Book of the month</h4>
<img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
<p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
</div>
</section>
</div>
<div class="bottomindex">
<div class="buybooks">
<article class="column">
<h4>Buying Rare Books</h4>
<p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
</article>
</div>
<div class="sellbooks">
<article class="column">
<h4>Selling Books</h4>
<p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
</article>
</div>
<div class="valuebooks">
<article class="column">
<h4>Valuing Books</h4>
<p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
<p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
</article>
</div>
</div>
</main>
<footer>
<ul id="footer">
<li><a class="url" href="#">Privacy</a></li>
<li><a class="url" href="#">Terms and Conditions</a></li>
<li><a class="url" href="#">Returns</a></li>
</ul>
</footer>
</div>
</body>
</html>
I've inspected the page with my browsers developer tools. Okay so it looks like the space is coming from the head settings. I've not got any properties set to impact the bottom so I'm really confused right now.
I've already tried setting padding/margin to 0 but it didn't change anything. Also tried playing around with some of the properties set to auto to no avail.
Any suggestions will be greatly appreciated.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Emblem Collectible Books</title>
<link rel="stylesheet" href="stylesheet.css" media="all">
</head>
<body>
<div class="grid-container">
<header>
<div class="header">
<div class="logo">
<img src="media/emblem_logo_128.png" id="logo">
<p id="logotext">Emblem Rare, Collectible Books</p>
</div>
<div class="top-links">
<ul id="top-links">
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="mainnav">
<ul id="mainnav" role="nav">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">20th Century Books</a>
<a href="19century.html">19th Century Books</a>
<a href="#">18th Century Books</a>
<a href="#">Rare Books</a>
</div>
</li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="">Books as an Investment</a></li>
</ul>
</div>
</div>
</header>
<main class="content">
<h1>Welcome to Emblem Collectible Books</h1>
<div class="topindex">
<section>
<div class="video">
<video id="homevideo" width="100%" height="100%" controls>
<source src="/media/emblem_video_480x360.webm" type="video/webm" />
<source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
<source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
<p>Sorry, your browser does not support this video.</p>
</video>
</div>
</section>
<section>
<div class="bookmonth">
<h4>Book of the month</h4>
<img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
<p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
</div>
</section>
</div>
<div class="bottomindex">
<div class="buybooks">
<article class="column">
<h4>Buying Rare Books</h4>
<p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
</article>
</div>
<div class="sellbooks">
<article class="column">
<h4>Selling Books</h4>
<p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
</article>
</div>
<div class="valuebooks">
<article class="column">
<h4>Valuing Books</h4>
<p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
<p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
</article>
</div>
</div>
</main>
<footer>
<ul id="footer">
<li><a class="url" href="#">Privacy</a></li>
<li><a class="url" href="#">Terms and Conditions</a></li>
<li><a class="url" href="#">Returns</a></li>
</ul>
</footer>
</div>
</body>
</html>
and this is the CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* END OF CSS RESET
*******************************************************************/
/* font */
@font-face {
font-family: "parisr";
src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
font-style: normal;
font-weight: 100;
}
body {
font-family: "parisr", Arial, sans-serif;
}
html {
background-color: #236841;
}
body {
background-color: white;
}
/* keep the footer at bottom */
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
position: relative;
}
.grid-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
/* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
/* margin for computer screens */
body {
margin-left: 150px;
margin-right: 150px;
}
/* CSS Grid Layout */
.grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header""main""footer";
}
.header {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: auto auto;
grid-template-areas: "logo top-links""logo mainnav";
grid-area: header;
}
.logo {
grid-area: logo;
margin: 25px auto auto;
}
.top-links {
grid-area: top-links;
}
ul li {
list-style-type: none;
display: inline;
}
ul li a {
text-decoration: none;
}
ul#top-links {
text-align: right;
padding-top: 1%;
}
ul#top-links li {
padding: 14px 16px;
color: black;
}
.mainnav {
grid-area: mainnav;
}
/* Navigation bar across all pages*/
.mainnav {
background-color: #333;
overflow: hidden;
}
.mainnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.mainnav a:hover {
background-color: #ddd;
color: black;
}
.mainnav a.active {
background-color: #4CAF50;
color: white;
}
/*dropdown for the books */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #236841;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* END OF HEADER CSS */
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* home page */
.index {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "topindex""bottomindex";
grid-area: main;
}
.topindex {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "video""bookmonth";
}
.bottomindex {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 1px 1px;
grid-template-areas: "buybooks sellbooks valuebooks";
}
.video {
grid-area: video;
padding: 0px 25px 0px;
}
.bookmonth {
grid-area: bookmonth;
padding: 0px 25px 0px;
}
.buybooks {
grid-area: buybooks;
padding: 0px 25px 0px;
}
.sellbooks {
grid-area: sellbooks;
padding: 0px 25px 0px;
}
.valuebooks {
grid-area: valuebooks;
padding: 0px 25px 0px;
}
.column h4 {
}
/* Books */
.books {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "article1 picture1""picture2 article2""article3 picture3";
grid-area: books;
}
.article1 {
grid-area: article1;
}
.picture1 {
grid-area: picture1;
}
.picture2 {
grid-area: picture2;
}
.article2 {
grid-area: article2;
}
.article3 {
grid-area: article3;
}
.picture3 {
grid-area: picture3;
}
/* Delivery needs style*/
.delivery {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "intro""table""article";
grid-area: delivery;
}
.intro, .table, .article {
padding: 0% 25% 0%;
}
.intro {
grid-area: intro;
}
.table {
grid-area: table;
}
.article {
grid-area: article;
}
/* Contact Us needs style */
form {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(7, auto);
grid-template-areas:
"title"
"name"
"email"
"nature"
"message"
"submit";
grid-gap: 0.8rem 0.5rem;
background: #EEE;
padding: 1rem;
border: 2px solid #7E7E7E;
margin-bottom: 2rem;
}
#title {
grid-area: title;
}
#name {
grid-area: name;
}
#email {
grid-area: email;
}
#nature {
grid-area: nature;
}
#message {
grid-area: message;
}
#submit {
grid-area: submit;
}
label {
display: block;
}
textarea {
width: 100%;
height: 8rem;
}
button {
background: #444;
color: #FFF;
padding: 1rem;
}
input, select {
width: 90%;
padding: 0.5rem;
margin: 0.5rem 0;
}
fieldset {
border: 1px solid #A8A8A8;
}
#contactform {
margin: 0% 25% 0%;
}
/* 19th century needs images and styling*/
#19centurybooks {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 1px 1px;
grid-template-areas: "article1 picture1""picture2 article2""article3 picture3""picture4 article4""article5 picture5""picture6 article6";
}
.article1 {
grid-area: article1;
}
.article2 {
grid-area: article2;
}
.article3 {
grid-area: article3;
}
.article4 {
grid-area: article4;
}
.article5 {
grid-area: article5;
}
.article6 {
grid-area: article6;
}
.picture1 {
grid-area: picture1;
}
.picture2 {
grid-area: picture2;
}
.picture3 {
grid-area: picture3;
}
.picture4 {
grid-area: picture4;
}
.picture5 {
grid-area: picture5;
}
.picture6 {
grid-area: picture6;
}
/* MEDIA QUERIES FOR SMALLER SCREEN SIZES */
@media
Also feel free to criticise my code. I'm still learning and I could do with any feedback.
解决方案
I checked your snippet. You create issue when you use grid-template-rows: 1fr 1fr 1fr;. I strongly suggest read the A Complete Guide to Grid and CSS Grid Layout.
Your parent grid CSS code.
.grid-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
/* height of your footer */
}
.grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header""main""footer";
}
grid-template-columns: auto; Auto Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
If you want full width for your grid child elements then use grid-template-columns: 1fr;. You can use auto but 1fr solution is good.
grid-template-rows: 1fr 1fr 1fr; You create same height for all child element. If your main content height is 1000px then others two content like header and footer will be same height. This is your main issue. You have to avoid unnecessary space then grid-template-rows will be auto 1fr auto in your case.
grid-template-areas: "header""main""footer"; with footer position is absolute it's incorrect. You no need to set footer position absolute.
Now your grid-container CSS
.grid-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
/*padding-bottom: 100px; */ /* No need this padding because grid will sent the footer in bottom of the page */
/* height of your footer */
}
.grid-container {
display: grid;
grid-template-columns: 1fr; /* You can use auto but I prefer 1fr */
grid-template-rows: auto 1fr auto; /* Avoid unnecessary space from header and footer */
grid-template-areas: "header""main""footer";
}
/* No need to set footer in absolute position */
footer {
/* position: absolute; */
/* bottom: 0; */
/* width: 100%; */
}
Use @media for responsive design. Use autoprefixer for support most browser in grid layout.
See snippet in full page view.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* END OF CSS RESET
*******************************************************************/
/* font */
@font-face {
font-family: "parisr";
src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
font-style: normal;
font-weight: 100;
}
body {
font-family: "parisr", Arial, sans-serif;
}
html {
background-color: #236841;
}
body {
background-color: white;
}
/* keep the footer at bottom */
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
position: relative;
}
.grid-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
/*padding-bottom: 100px;*/
/* height of your footer */
}
/*footer {
position: absolute;
bottom: 0;
width: 100%;
}*/
/* margin for computer screens */
body {
margin-left: 150px;
margin-right: 150px;
}
/* CSS Grid Layout */
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header""main""footer";
}
.header {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: auto auto;
grid-template-areas: "logo top-links""logo mainnav";
grid-area: header;
}
.logo {
grid-area: logo;
margin: 25px auto auto;
}
.top-links {
grid-area: top-links;
}
ul li {
list-style-type: none;
display: inline;
}
ul li a {
text-decoration: none;
}
ul#top-links {
text-align: right;
padding-top: 1%;
}
ul#top-links li {
padding: 14px 16px;
color: black;
}
.mainnav {
grid-area: mainnav;
}
/* Navigation bar across all pages*/
.mainnav {
background-color: #333;
overflow: hidden;
}
.mainnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.mainnav a:hover {
background-color: #ddd;
color: black;
}
.mainnav a.active {
background-color: #4CAF50;
color: white;
}
/*dropdown for the books */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #236841;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* END OF HEADER CSS */
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* home page */
.index {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "topindex""bottomindex";
grid-area: main;
}
.topindex {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "video""bookmonth";
}
.bottomindex {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 1px 1px;
grid-template-areas: "buybooks sellbooks valuebooks";
}
.video {
grid-area: video;
padding: 0px 25px 0px;
}
.bookmonth {
grid-area: bookmonth;
padding: 0px 25px 0px;
}
.buybooks {
grid-area: buybooks;
padding: 0px 25px 0px;
}
.sellbooks {
grid-area: sellbooks;
padding: 0px 25px 0px;
}
.valuebooks {
grid-area: valuebooks;
padding: 0px 25px 0px;
}
.column h4 {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Emblem Collectible Books</title>
<link rel="stylesheet" href="stylesheet.css" media="all">
</head>
<body>
<div class="grid-container">
<header>
<div class="header">
<div class="logo">
<img src="media/emblem_logo_128.png" id="logo">
<p id="logotext">Emblem Rare, Collectible Books</p>
</div>
<div class="top-links">
<ul id="top-links">
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="mainnav">
<ul id="mainnav" role="nav">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">20th Century Books</a>
<a href="19century.html">19th Century Books</a>
<a href="#">18th Century Books</a>
<a href="#">Rare Books</a>
</div>
</li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="">Books as an Investment</a></li>
</ul>
</div>
</div>
</header>
<main class="content">
<h1>Welcome to Emblem Collectible Books</h1>
<div class="topindex">
<section>
<div class="video">
<video id="homevideo" width="100%" height="100%" controls>
<source src="/media/emblem_video_480x360.webm" type="video/webm" />
<source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
<source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
<p>Sorry, your browser does not support this video.</p>
</video>
</div>
</section>
<section>
<div class="bookmonth">
<h4>Book of the month</h4>
<img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
<p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
</div>
</section>
</div>
<div class="bottomindex">
<div class="buybooks">
<article class="column">
<h4>Buying Rare Books</h4>
<p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
</article>
</div>
<div class="sellbooks">
<article class="column">
<h4>Selling Books</h4>
<p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
</article>
</div>
<div class="valuebooks">
<article class="column">
<h4>Valuing Books</h4>
<p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
<p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
</article>
</div>
</div>
</main>
<footer>
<ul id="footer">
<li><a class="url" href="#">Privacy</a></li>
<li><a class="url" href="#">Terms and Conditions</a></li>
<li><a class="url" href="#">Returns</a></li>
</ul>
</footer>
</div>
</body>
</html>
这篇关于为什么我不能从CSS Grid Layout中删除所有死区?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
