时间戳

首页 > 解决方案 > 在 CSS 网格线框中设置左右页脚

css - 在 CSS 网格线框中设置左右页脚

问题描述

如何使用 CSS 网格将左页脚保持在左侧，将右页脚保持在右侧？我一直在从另一个codepen修改线框，并添加了 left-footer 和 right-footer 类以与页脚 HTML5 标记一起使用，并在 css 代码中添加了 .nav 以及 .left-footer 和 .right-footer 部分.

“grid-template-areas:”的第四行是：“footer footer footer footer”；

我需要将其更改为以下内容吗？：“footer left-footer right-footer footer”；

如果是这样，我如何定义它们以便网格知道如何处理它们？谢谢你。

我的密码笔在这里。

<!doctype html>
<!-- original source from https://codepen.io/mercuryworks/pen/VWBqdx-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Week 2 dd</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
    <header class="header">
        Header
    </header>
  <nav class ="nav">Nav</nav>
     <main class="main">
        Main content
    </main>
    <footer class="footer">
        Footer
   <footer class="left-footer">
     <p>Left Footer<p></footer>
    <footer class="right-footer">
           <p> Right Footer<p></footer>       
    </footer>
</div>
</body>
</html>

.wrapper {
  background-color: yellow;
    height: 120vh;
    display: grid;
    grid-template-columns: 15rem 15rem 15rem 15rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header         header  header  header"
    "nav        nav     nav      nav"
        "main      main         main        main"
        "footer         footer  footer  footer";
    max-width: 66rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #ccc;
    @media (max-width: 36rem) {
        display: flex;
        flex-direction: column;
    }
}

.header {
  max-height: 5rem;
  margin: 1% 1% 1% 1%;
    grid-area: header;
    padding: 1rem;
    border-bottom: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 1;
    }
}

.nav {
  margin: 1% 1% 1% 1%;
  max-height: 1rem;
    grid-area: nav;
    padding: 1rem;
    border-bottom: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 1;
    }
}


.main {
    grid-area: main;
    padding: 1rem;
    @media (max-width: 36rem) {
        order: 1;
    }
}

.aside {
    grid-area: sidebar;
    padding: 1rem;
    background-color: #eee;
    border-right: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 3;
        border-right: 0;
        border-top: 1px solid #ccc;
    }
}

.footer {
  background-color: #ccc;
    grid-area: footer;
    padding: 1rem;
    border-top: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 4;
    }
}

.left-footer {
  background-color: #ccc;
    grid-area: footer;
    padding: 1rem;
    border-top: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 4;
    }
}

.right-footer {
    grid-area: footer;
    padding: 1rem;
  border-top: 1px solid #ccc;
    @media (max-width: 36rem) {
        order: 4;
    }
}


// Setup
* {
    box-sizing: border-box;
}

html {
  font-family: Verdana, "sans-serif";
    font-size: 16px;
    margin: 0;
    padding: 0; 
}

body {
    font-size: 1rem;
    padding: 1rem;
    margin: 0;
  background-color: white;
}

我需要得到这样的结果：

在此处输入图像描述

标签： csscss-grid

解决方案

您需要摆脱主要的包装页脚并将两者left-footer都right-footer放在wrapper.

所以它会是这样的：

.wrapper {
  background-color: yellow;
  height: 120vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header header" "nav nav nav nav" "main main main main" "left-footer left-footer right-footer right-footer";
  max-width: 66rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  @media (max-width: 36rem) {
    display: flex;
    flex-direction: column;
  }
}

.header {
  max-height: 5rem;
  margin: 1% 1% 1% 1%;
  grid-area: header;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.nav {
  margin: 1% 1% 1% 1%;
  max-height: 1rem;
  grid-area: nav;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.main {
  grid-area: main;
  padding: 1rem;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.aside {
  grid-area: sidebar;
  padding: 1rem;
  background-color: #eee;
  border-right: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 3;
    border-right: 0;
    border-top: 1px solid #ccc;
  }
}

.left-footer {
  background-color: #ccc;
  grid-area: left-footer;
  padding: 1rem;
  border-top: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 4;
  }
}

.right-footer {
  background-color: #ccc;
  grid-area: right-footer;
  padding: 1rem;
  border-top: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 4;
  }
}

// Setup
* {
  box-sizing: border-box;
}

html {
  font-family: Verdana, "sans-serif";
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  padding: 1rem;
  margin: 0;
  background-color: white;
}
<!doctype html>
<!-- original source from https://codepen.io/mercuryworks/pen/VWBqdx-->
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Week 2 dd</title>

  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      Header
    </header>
    <nav class="nav">Nav</nav>
    <main class="main">
      Main content
    </main>
    <footer class="left-footer">
      <p>Left Footer
        <p>
    </footer>
    <footer class="right-footer">
      <p> Right Footer
        <p>
    </footer>
  </div>
</body>

</html>

所以当你更新你的问题时，上面的答案应该是这样的：

.wrapper {
  background-color: yellow;
  height: 120vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header header" "nav nav nav nav" "main main main main" "left-footer right-footer right-footer right-footer";
  max-width: 66rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  @media (max-width: 36rem) {
    display: flex;
    flex-direction: column;
  }
}

.header {
  max-height: 5rem;
  margin: 1% 1% 1% 1%;
  grid-area: header;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.nav {
  margin: 1% 1% 1% 1%;
  max-height: 1rem;
  grid-area: nav;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.main {
  grid-area: main;
  padding: 1rem;
  @media (max-width: 36rem) {
    order: 1;
  }
}

.aside {
  grid-area: sidebar;
  padding: 1rem;
  background-color: #eee;
  border-right: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 3;
    border-right: 0;
    border-top: 1px solid #ccc;
  }
}

.left-footer {
  background-color: #ccc;
  grid-area: left-footer;
  padding: 1rem;
  border-top: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 4;
  }
}

.right-footer {
  background-color: #ccc;
  grid-area: right-footer;
  padding: 1rem;
  border-top: 1px solid #ccc;
  @media (max-width: 36rem) {
    order: 4;
  }
}

// Setup
* {
  box-sizing: border-box;
}

html {
  font-family: Verdana, "sans-serif";
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  padding: 1rem;
  margin: 0;
  background-color: white;
}
<!doctype html>
<!-- original source from https://codepen.io/mercuryworks/pen/VWBqdx-->
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Week 2 dd</title>

  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      Header
    </header>
    <nav class="nav">Nav</nav>
    <main class="main">
      Main content
    </main>
    <footer class="left-footer">
      <p>Left Footer
        <p>
    </footer>
    <footer class="right-footer">
      <p> Right Footer
        <p>
    </footer>
  </div>
</body>

</html>

推荐阅读