页脚外部网格布局后

我真的很新开发网站。而且我在某处读到网格基本上是简单响应式设计的未来，所以我正在尝试使用它。现在我无法弄清楚包装类以外的元素如何跟随第一列的最大宽度。页脚外部网格布局后

下面是HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>GRID</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <link rel="stylesheet" type="text/css" href="userpage.css" /> 

</head> 
<body class= 'wrapper'> 

    <div class= 'box header'> 
     <img src=''> 
     <ul class= 'nav-ul'> 
      <li class= 'nav-li'><a href='#'>Home</a></li> 
      <li class= 'nav-li'><a href='#'>About Us</a></li> 
      <li class= 'nav-li'><a href='#'>Contact</a></li> 
     </ul> 
    </div> 
    <!-- End of header --> 

    <div class= 'box left'> 
     box left 
    </div> 
    <div class= 'box right'> 
     box right 
    </div> 
    <div class= 'box contact'> 
     contact 
    </div> 
</body> 
<!-- End of Body --> 

<footer> 
    This is the footer 

</footer> 

</html>

这里是CSS：

*{ 
    padding: 0px; 
    margin: 0px; 
} 


.wrapper { 
    display: grid; 
    grid-template-columns: 50% 50%; 
    grid-template-areas: 
     "header header" 
     "body-l body-r" 
     "contact contact"; 
    margin: 0px; 
    padding: 0px; 
} 

.box { 
    border-style: dotted; 
    border-color: red; 
    padding: 10px; 
} 

.header { 
    grid-area: header; 
    background-color: #1df9b7; 
} 

.left { 
    grid-area: body-l; 
} 

.right { 
    grid-area: body-r; 
} 

.contact { 
    grid-area: contact; 
} 

.nav-ul { 
    list-style: none; 
    float: right; 
} 

.nav-li { 
    float: left; 
    padding-right: 0.7em; 
} 

.nav-li a { 
    text-decoration: none; 
    color: white; 
} 

footer { 
    background-color: #00704e; 
}

什么，我想是页脚，以填补该网站的其余区域。

来源

2017-08-04 LRD27

首先您需要了解如何使用<body>标签。

HTML <body>元素表示HTML文档的内容。

只有<body>标记内的元素才会实际显示在页面上。您可以使用<main>标签来包装页面的主要内容。

接下来，你可以使身体占据屏幕的整个高度，并给它的背景颜色：

body { 
    height: 100vh; 
    background-color: #00704e; 
}

由于页脚是最后一个元素，使用相同的背景颜色，它将会出现，好像它正在填充剩余的区域。

*{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    background-color: #00704e; 
 
} 
 

 

 
.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 50% 50%; 
 
    grid-template-areas: 
 
     "header header" 
 
     "body-l body-r" 
 
     "contact contact"; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #fff; 
 
} 
 

 
.box { 
 
    border-style: dotted; 
 
    border-color: red; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    background-color: #1df9b7; 
 
} 
 

 
.left { 
 
    grid-area: body-l; 
 
} 
 

 
.right { 
 
    grid-area: body-r; 
 
} 
 

 
.contact { 
 
    grid-area: contact; 
 
} 
 

 
.nav-ul { 
 
    list-style: none; 
 
    float: right; 
 
} 
 

 
.nav-li { 
 
    float: left; 
 
    padding-right: 0.7em; 
 
} 
 

 
.nav-li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
footer { 
 
    background-color: #00704e; 
 
}

<main class= 'wrapper'> 
 

 
    <div class= 'box header'> 
 
     <img src=''> 
 
     <ul class= 'nav-ul'> 
 
      <li class= 'nav-li'><a href='#'>Home</a></li> 
 
      <li class= 'nav-li'><a href='#'>About Us</a></li> 
 
      <li class= 'nav-li'><a href='#'>Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- End of header --> 
 

 
    <div class= 'box left'> 
 
     box left 
 
    </div> 
 
    <div class= 'box right'> 
 
     box right 
 
    </div> 
 
    <div class= 'box contact'> 
 
     contact 
 
    </div> 
 
</main> 
 
<!-- End of Body --> 
 

 
<footer> 
 
    This is the footer 
 

 
</footer>

来源

2017-08-04 01:09:02

那好吧，谢谢。但是，我如何让页脚填充页面的高度？ – LRD27

最简单的方法是给身体一个100vh的高度，并给它一个你想要的页脚背景颜色。 –

查看更新后的代码片段。（请注意，我还为内容添加了背景色以将其与页脚分开。） –

页脚外部网格布局后

回答

相关问题