我使用CSS网格和三列，但它们不随内容而生长，尽管设置为100％

发布于 2025-02-11 08:39:57 字数 4118 浏览 2 评论 0原文

此时，我实际上尝试了所有内容，但是我的代码中的某些内容使我的网站表现得很有趣。我已经设置了它，以接受具有非常高的分辨率的图片，以填充我的CSS网格的中心列，另外两个充当边缘。当我使用当前的代码执行此操作时，图片会溢出网格，当我滚动边距滚动时，该页面只是在页面下方停止。容器的大小随照片的高度而生长，但我的边缘没有。这是我的网站的图片向下滚动，奶油色部分是容器，黑色部分是边缘停止的地方。

网站的图片：

如果有人有一些建议，请感谢您提供的任何建议！

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

p {
    color: #45d163;
    font-size: 2.5vh;
}

.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;
  
  
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  
  width: 8vw;
  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: auto fit-content(70%) auto;
  background-color: #fceee3;
  width: 100vw;
  height: 100%;
  overflow: scroll;
}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  height: auto;
  margin-top: 0%;
  
}
 .grid-center {
  background-color: #252525;
  height: auto;
  margin-top: 0%;

}

</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"> 
        
            <img src="images/homepageFour.png" width="100%"> </img>
        
        </div>
        
    <div class="grid-item"></div>
      
      </div>
    
  </body>
  
</html>
<!-- partial -->

原文

I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.

Picture of website:

Thanks for any advice if someone has some!

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

p {
    color: #45d163;
    font-size: 2.5vh;
}

.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;
  
  
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  
  width: 8vw;
  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: auto fit-content(70%) auto;
  background-color: #fceee3;
  width: 100vw;
  height: 100%;
  overflow: scroll;
}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  height: auto;
  margin-top: 0%;
  
}
 .grid-center {
  background-color: #252525;
  height: auto;
  margin-top: 0%;

}

</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"> 
        
            <img src="images/homepageFour.png" width="100%"> </img>
        
        </div>
        
    <div class="grid-item"></div>
      
      </div>
    
  </body>
  
</html>
<!-- partial -->

分享到QQ

分享到微博

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

发布评论

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

烦人精 2025-02-18 08:39:57

第二个选择器之所以有效，是因为特殊性值命名为“ .header a”低于名为“ .header A. Active”的选择器的特异性值。

如果您想几乎最大化特异性值，则必须：使用！重要。

.header a {
  width: max-content !important;
}

The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".

If you want to almost maximize the specificity value, you have to: use !important.

.header a {
  width: max-content !important;
}

回复收藏 0 原文

~没有更多了~

关于作者

趁微风不噪

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

我使用CSS网格和三列，但它们不随内容而生长，尽管设置为100％

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

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

我使用CSS网格和三列，但它们不随内容而生长，尽管设置为100％

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

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

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