css - 如何格式化具有最小高度的 div 并使用 CSS Grid 使子 div 顶部对齐？

问题描述

我在这里模拟了 [https://codepen.io/axlemax/pen/zYKWPge]

它是 Twitter 桌面基本布局的副本 [https://twitter.com/home]

我遇到的问题是我希望名为“ div class=”adcontainer” [顶部带有“发生了什么”的 div] 的 div 至少 900px 高

…但是如果 6 个广告项从它们在 div 顶部的位置移动，我就无法做到这一点

我试过“最小高度：900px”，但它只是隔开广告项目

我尝试更改“grid-template-rows: 15px auto;” 到“网格模板行：15px 900px；” 但这将大部分广告项目移出屏幕

有人可以帮忙吗？

[注意：这里是 Stack Snippet 版本。codepen one 运行得更好 IMO，但有些人对使用 Stack Snippets 持迂腐态度]

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: "Helvetica Neue",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: black;
}

*, *:before, *:after { box-sizing: inherit; }

div {
  padding: 5px 5px 5px 5px;
}

.container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  border: solid blue;
}

.col {
  border: solid red;
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 40px 1fr;
}

.twocol {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 80px 1fr;
  background-color: white;
}

.tworow {
  display: grid;
  grid-gap: 5px;
  grid-template-row: auto 1fr;
  background-color: white;  
}

.avatar {
  background-color: red;
}

.tweettext {
  background-color: red;
}

.debug {
  border: solid orange;
  background-color: orange;
}

.logo {
    height: 50px;
}

.menu {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 50px auto;
}

.menuitem {
  min-height: 50px; 
  background-color: yellow;
}

.profile {
    height: 75px;
}

.sticky {
  font-weight: 900;
  
  position: -webkit-sticky; /* Safari */
  position: sticky;
  height: 50px;
  top: 0;
}

.tweetform {
  min-height: 100px;
}

.tweetfeed {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 15px auto;
}

.tweet {
  min-height: 100px; 
  background-color: pink;
}

.adcontainer {
  display: grid;
  grid-gap: 15px;
  grid-template-rows: 15px auto;
  align-items: start;
  min-height: 600px; 
}

.aditem {
  min-height: 50px; 
  background-color: yellow;
}

<html>
  <div class="container">

    <div class="col">
      <div class="logo debug">Logo</div>
      <div class="menu debug">
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
        <div class="menuitem">Menu item</div>
      </div>
      <div class="profile debug">Profile</div>
    </div>

    <div class="col">
      <div class="sticky debug">Home</div> 
      <div class="tweetform debug">
         <div class="twocol">
            <div class="avatar">Avatar</div>
            <div class="tworow">
              <div class="avatar">
                Tweet text 
              </div>
              <div class="avatar">Buttons</div>
            </div>
          </div> 
      </div>
      <div class="tweetfeed debug">Tweet Feed
        <div class="tweet">Tweet
          <div class="twocol">
            <div class="avatar">Avatar</div>
            <div class="tworow">
              <div class="avatar">
                Tweet text 
              </div>
              <div class="avatar">Buttons</div>
            </div>
          </div>
        </div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
        <div class="tweet">Tweet</div>
      </div>
    </div>

    <div class="col">
      <div class="sticky debug">Search</div>
      
      <div class="adcontainer debug">What's happening
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
        <div class="aditem">Ad item</div>
      </div>
    </div>

  </div>
</html>

标签： csscss-grid

css - 如何格式化具有最小高度的 div 并使用 CSS Grid 使子 div 顶部对齐？

问题描述

解决方案

推荐阅读