Question

我是开发网站的新手。我在某处读到网格基本上是简单响应式设计的未来，所以我试图使用它。现在我无法弄清楚包装类之外的元素是如何跟随第一列最大宽度的。

这是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;
}

我想要的是填充网站剩余区域的页脚。

Answer 1

首先，您需要了解如何使用<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>

网格布局后的页脚外部

1 个答案: