当前位置： 文江博客 话题详情

我的CSS网格在内容高度方面不正确地尺度

发布于 2025-02-13 19:54:04 字数 4772 浏览 0 评论 0 原文

好吧，我会尽力使这很快。我正在努力升级我的网站作为一个有趣的项目。我以前使用了表作为我的网站布局，但是我试图使用CSS网格，因为从那以后我学到了很多东西。我使用的CSS网格仅为3列，外部两列作为边缘的作用，并且中心为内容。每当有足够的内容使页面向下滚动时，边距就不会随之增长。实际上，中心也不是，因为当我将某些东西放在高图下方之后滚动到底部时，它只是显示了我的容器的背景颜色。

为了使问题更简单，如何像其他边距一样使页面上的白色部分变成黑色？

滚动到页面中间：链接到第一张图片

一直滚动到底部： link第二张图片

我重复一遍，关闭白色不是故意的，因为它是容器的颜色。奶油色的所有内容都应该是黑色或灰色！

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    
}

  
.content {
    width: 70vw;
    height: 100vh;
    background-color: #252525;
}

.margin {
    width: 15vw;
    height: 100vh;
    background-color: #000000;
}

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

tr {
    vertical-align: top;
}

a {
    color: dodgerblue;
}

p {
    color: #45d163;
    font-size: 3.0vh;
    text-align: left;
    margin-left: 2.5vw;
    font-family: Arial, bold;
    font-weight: bold;
}

ol {
    margin-left: 3.5vw;
}
ul{
    
}
li{
    
}

.fixed {
    position: fixed;
}

.grid-container {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  background-color: #fceee3;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 100vh;

}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  min-height: 100vh;
  margin-top: 0%;

  
}
 .grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  min-height: 100vh;
  margin-top: 0%;

}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
  
  <head>
  <meta charset="UTF-8">
  <title>Keyboard Mechanic</title>
  <link rel="stylesheet" href="style.css"> </link>

    <style>

.header {
  overflow: hidden;
  background-color: #171615;
  padding: 1% 1%;
  width: 100%;
  position: fixed;
  height: 7%;
  
  
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  
  width: max-content !important;
  margin-right: 10px;
 
}

.header a.active {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
  
}

.header a.logo {
  all: unset;
}

.login {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}



.header-right {
  float: right;
}

@media screen and (max-width: 100%) {
  .header a {
    float: none;
    display: block;
    text-align: left;
    
  }
 }
</style>

<style>
.wrapper {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 1fr;
  background-color: #fceee3;
  width: 100vw;
  height: 100%;
  overflow: scroll;
  min-height: 100# !important;
 
}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;  
  height: auto;
  min-height: 100# !important;
  
}
 .grid-center {
  background-color: #252525;
  margin-top: 0%;
  width: 100%;
  height: 100%;
  min-height: 100# !important;

}


</style>


  </head>
    
  <body>  
      <div class="header">
          <a href="newLook.html" class="logo" > <img src="images/cornerlogo.png" height="50px"> </a>
          <div class="header-right">
          <a class="active" href="newLook.html">Home</a>
          <a class="active" href="games.html">Games</a>
          <a class="active" href="webprojects.html">Web Projects</a>
          <a class="login"  href="login.html">Login</a>
          <a href="contact.html">Contact</a>
          <a href="about.html" style="margin-right: 2vw;">About</a>
    
          </div>
       </div>
 
      <div class="wrapper"> 
        <div class="grid-item"> </div>
        
        <div class="grid-center"> 
            <p>Hello </p>
            <img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
            <p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
        </div>
        
        <div class="grid-item"> </div>
      
      </div>
    
  </body>
  
</html>
<!-- partial -->

原文

Okay, I'll try to make this pretty quick. I'm working on upgrading my website's looks as a fun project. I used tables before as my site layout, but I'm trying to use CSS Grid as I've learned a lot since then. I'm using a CSS grid of just 3 columns, the outer two act as margins and the center is for content. Whenever there is enough content to make the page scroll down, the margins don't grow with it. In fact, neither does the center, because when I scroll to the bottom after putting something below a tall image it just shows the background color of my container.

To make the question simpler, how do I make the off white parts of my page black like the rest of the margins?

Scrolled to middle of page: Link to first picture

Scrolled all the way to the bottom: Link to second picture

I repeat, the off white color is not intentional, that's there because it's the color of the container. Everything that's the cream color should be black or gray!

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    
}

  
.content {
    width: 70vw;
    height: 100vh;
    background-color: #252525;
}

.margin {
    width: 15vw;
    height: 100vh;
    background-color: #000000;
}

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

tr {
    vertical-align: top;
}

a {
    color: dodgerblue;
}

p {
    color: #45d163;
    font-size: 3.0vh;
    text-align: left;
    margin-left: 2.5vw;
    font-family: Arial, bold;
    font-weight: bold;
}

ol {
    margin-left: 3.5vw;
}
ul{
    
}
li{
    
}

.fixed {
    position: fixed;
}

.grid-container {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  background-color: #fceee3;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 100vh;

}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  min-height: 100vh;
  margin-top: 0%;

  
}
 .grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  min-height: 100vh;
  margin-top: 0%;

}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
  
  <head>
  <meta charset="UTF-8">
  <title>Keyboard Mechanic</title>
  <link rel="stylesheet" href="style.css"> </link>

    <style>

.header {
  overflow: hidden;
  background-color: #171615;
  padding: 1% 1%;
  width: 100%;
  position: fixed;
  height: 7%;
  
  
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  
  width: max-content !important;
  margin-right: 10px;
 
}

.header a.active {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
  
}

.header a.logo {
  all: unset;
}

.login {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}



.header-right {
  float: right;
}

@media screen and (max-width: 100%) {
  .header a {
    float: none;
    display: block;
    text-align: left;
    
  }
 }
</style>

<style>
.wrapper {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 1fr;
  background-color: #fceee3;
  width: 100vw;
  height: 100%;
  overflow: scroll;
  min-height: 100# !important;
 
}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;  
  height: auto;
  min-height: 100# !important;
  
}
 .grid-center {
  background-color: #252525;
  margin-top: 0%;
  width: 100%;
  height: 100%;
  min-height: 100# !important;

}


</style>


  </head>
    
  <body>  
      <div class="header">
          <a href="newLook.html" class="logo" > <img src="images/cornerlogo.png" height="50px"> </a>
          <div class="header-right">
          <a class="active" href="newLook.html">Home</a>
          <a class="active" href="games.html">Games</a>
          <a class="active" href="webprojects.html">Web Projects</a>
          <a class="login"  href="login.html">Login</a>
          <a href="contact.html">Contact</a>
          <a href="about.html" style="margin-right: 2vw;">About</a>
    
          </div>
       </div>
 
      <div class="wrapper"> 
        <div class="grid-item"> </div>
        
        <div class="grid-center"> 
            <p>Hello </p>
            <img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
            <p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
        </div>
        
        <div class="grid-item"> </div>
      
      </div>
    
  </body>
  
</html>
<!-- partial -->

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

是伱的 2025-02-20 19:54:05

您本可以使用 flex 来完成此操作，就我的知识而言，网格不是为此目的做的！

这是用 flex 制作的示例

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */
<div class="header">
  <div class="header-logo">
    <a href="#"><img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div class="header-menu">
    <a class="active" href="#">Home</a>
    <a class="active" href="#">Games</a>
    <a class="active" href="#">Web Projects</a>
    <a class="login" href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div class="wrapper">
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div class="white-space">
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

更新：
为标题增加了自定义高度

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  align-items: center;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */
<div class="header">
  <div class="header-logo">
    <a href="#"><img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div class="header-menu">
    <a class="active" href="#">Home</a>
    <a class="active" href="#">Games</a>
    <a class="active" href="#">Web Projects</a>
    <a class="login" href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div class="wrapper">
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div class="white-space">
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

You could have done this with flex, To the best of my knowledge grid is not made for that purpose!

Here's an example made with flex

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */
<div class="header">
  <div class="header-logo">
    <a href="#"><img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div class="header-menu">
    <a class="active" href="#">Home</a>
    <a class="active" href="#">Games</a>
    <a class="active" href="#">Web Projects</a>
    <a class="login" href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div class="wrapper">
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div class="white-space">
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

Updated:
added custom height to the header

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  align-items: center;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */
<div class="header">
  <div class="header-logo">
    <a href="#"><img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div class="header-menu">
    <a class="active" href="#">Home</a>
    <a class="active" href="#">Games</a>
    <a class="active" href="#">Web Projects</a>
    <a class="login" href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div class="wrapper">
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div class="white-space">
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

回复 原文
奢欲 2025-02-20 19:54:05

删除用于.grid-Center和.grid-item的最低点：

.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;
}
.grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  margin-top: 0%;
}

Remove the min-height for .grid-center and .grid-item:

.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;
}
.grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  margin-top: 0%;
}
回复 原文
~没有更多了~

关于作者

萌酱

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_aHcEbj

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

寻找我们的幸福

文章 0 评论 0

把昨日还给我

文章 0 评论 0

wj_zym

文章 0 评论 0

巴黎夜雨

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文