简单网格设计上的旁白元素，但不是一直到主元素的底部

问题描述 投票：0回答：1

我有一个简单的网格设计（请参阅下面的代码片段，请确保以全屏方式观看），并且希望只要通过滚动未满足主元素的高度，旁边元素就会保留。

旁侧元素实际上确实会粘住，但仅限于主元素高度的一部分。关于如何将其更改为所需行为的任何想法？

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root {
  --border-radius: 8px;
  --box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
  
  --grid-row-height: 90px;
  --container-gap: 2rem;
  --container-padding: 2rem;
  
  --rem-xxs: 0.5rem;
  --rem-xs: 0.75rem;
  --rem-s: 1rem;
  --rem-m: 1.25rem;
  --rem-xm: 1.5rem;
  --rem-l: 2rem;
  --rem-xl: 2.5rem;
  --rem-xxl: 3rem;
  --rem-4s: calc(4 * var(--rem-s));
  --rem-5s: calc(5 * var(--rem-s));
  --rem-6s: calc(6 * var(--rem-s));
  
  --ff-primary: "Roboto", sans-serif;
  --ff-accent: "Roboto", sans-serif;

  --fs-small: clamp(var(--rem-xs), 0.5vw, var(--rem-s));
  --fs-normal: clamp(var(--rem-s), 1vw, var(--rem-m));
  --fs-big: clamp(var(--rem-m), 1.25vw, var(--rem-xm));
  --fs-xbig: clamp(var(--rem-xm), 1.5vw, var(--rem-l));
  --fs-xxbig: clamp(var(--rem-l), 1.5vw, var(--rem-xl));

  --fw-light: 100;
  --fw-normal: 300;
  --fw-bold: 400;
  --fw-xbold: 500;
  --fw-xxbold: 700;
  
  --clr-primary: #333333;
  --clr-accent: #EA161F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: #f5f5f5;
  color: var(--clr-primary);
}

body, p, input, select, textarea {
  font-family: var(--ff-primary);
  font-weight: var(--fw-normal);
  font-size: var(--fs-normal);
  line-height: 1.5;
}

#grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: var(--grid-row-height) auto var(--grid-row-height);
  grid-template-areas: 
    "nav search"
    "main aside"
    "footer footer";
  margin: var(--container-gap);
  gap: var(--container-gap);
  min-height: calc(100vh - 2 * var(--container-gap));
}

  #grid > * {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);
  }

  nav { grid-area: nav; }
  #search { grid-area: search; }
  main { grid-area: main; }
  aside { grid-area: aside; }
  footer { grid-area: footer; }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

  nav > * {
    display: flex;
    align-items: center;
    gap: var(--container-gap);
  }

  #logo img {
    height: calc(var(--grid-row-height) / 100 * 50);
  }

  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--container-padding);
  }

    nav ul li a:link, nav ul li a:visited {
      font-weight: var(--fw-bold);
      height: var(--grid-row-height);
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--clr-primary);
    }

    nav ul li a:hover, nav ul li a:active {
      color: var(--clr-accent);
    }

#search {
  padding: 0;
  padding-right: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-padding);
}

  #search form {
    width: 100%;
  }

  input[type=search] {
    border: none;
    width: 100%;
    height: var(--grid-row-height);
    padding: var(--container-padding);
    border-radius: var(--border-radius);
    outline: none;
  }

  #search a {
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: var(--fw-xbold);
  }

main {
  
}

aside {
  position: sticky;
  top: var(--container-gap);
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

  aside > * {
    border-radius: 8px;
    background-color: white;
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);
  }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--clr-accent) !important;
  color: white;
}

  footer > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--container-gap);
  }

  footer a {
    color: white !important;
    text-decoration: none;
    font-weight: var(--fw-bold);
  }
<html>
  <head>
    <script src="https://kit.fontawesome.com/dee405e1bd.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="grid">
        <nav>
          <div>
            <div id="logo">
              <a href="#"><img src="https://berufsbildungscenter.ch/app/uploads/Logo_KAIO.png"></a>
            </div>
            <ul>
              <li><a href="#"><i class="fas fa-clipboard-list fa-fw fa-2x"></i></a></li>
              <li><a href="#"><i class="fas fa-masks-theater fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
          <div>
            <ul>
              <li><a href="#"><i class="fas fa-sliders fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
        </nav>
        <div id="search">
          <form>
            <input type="search" value="" placeholder="SEARCH">
          </form>
          <a href="#"><i class="fas fa-magnifying-glass"></i></a>
        </div>
      <main>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
      </main>
      <aside>
        <div>
          ASIDE DIV
        </div>
        
        <div>
          ASIDE DIV
        </div>
      </aside>
      <footer>
        <div>
          <span><i class="far fa-copyright"></i>&nbsp;&nbsp;2016&dash;2023 by learni.ch - Ein Produkt der           <a href="https://duolopment.ch" target="_blank">duolopment KLG</a></span>
          <nav>
            <ul>
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
            </ul>
          </nav>
        </div>
        <div>
          <nav>
            <ul>
              <li><i class="fas fa-code"></i>&nbsp;&nbsp;Version: Aphrodite (2.7)</li>
              <li><a href="#">Releasenotes</a></li>
              <li><a href="#">Support</a></li>
            </ul>
          </nav>
        </div>
      </footer>
    </div>
  </body>
</html>

预先感谢您的大力帮助。

css flexbox css-grid sticky
1个回答
1
投票

好吧，你的 

<aside>
的高度很大，导致它无法一直滚动到底部。通过调整其高度即可达到所需的效果。我将其高度设置为 
height: max-content
，它似乎按预期工作。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root {
  --border-radius: 8px;
  --box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
  
  --grid-row-height: 90px;
  --container-gap: 2rem;
  --container-padding: 2rem;
  
  --rem-xxs: 0.5rem;
  --rem-xs: 0.75rem;
  --rem-s: 1rem;
  --rem-m: 1.25rem;
  --rem-xm: 1.5rem;
  --rem-l: 2rem;
  --rem-xl: 2.5rem;
  --rem-xxl: 3rem;
  --rem-4s: calc(4 * var(--rem-s));
  --rem-5s: calc(5 * var(--rem-s));
  --rem-6s: calc(6 * var(--rem-s));
  
  --ff-primary: "Roboto", sans-serif;
  --ff-accent: "Roboto", sans-serif;

  --fs-small: clamp(var(--rem-xs), 0.5vw, var(--rem-s));
  --fs-normal: clamp(var(--rem-s), 1vw, var(--rem-m));
  --fs-big: clamp(var(--rem-m), 1.25vw, var(--rem-xm));
  --fs-xbig: clamp(var(--rem-xm), 1.5vw, var(--rem-l));
  --fs-xxbig: clamp(var(--rem-l), 1.5vw, var(--rem-xl));

  --fw-light: 100;
  --fw-normal: 300;
  --fw-bold: 400;
  --fw-xbold: 500;
  --fw-xxbold: 700;
  
  --clr-primary: #333333;
  --clr-accent: #EA161F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: #f5f5f5;
  color: var(--clr-primary);
}

body, p, input, select, textarea {
  font-family: var(--ff-primary);
  font-weight: var(--fw-normal);
  font-size: var(--fs-normal);
  line-height: 1.5;
}

#grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: var(--grid-row-height) auto var(--grid-row-height);
  grid-template-areas: 
    "nav search"
    "main aside"
    "footer footer";
  margin: var(--container-gap);
  gap: var(--container-gap);
  min-height: calc(100vh - 2 * var(--container-gap));
}

  #grid > * {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);
  }

  nav { grid-area: nav; }
  #search { grid-area: search; }
  main { grid-area: main; }
  aside { grid-area: aside; }
  footer { grid-area: footer; }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

  nav > * {
    display: flex;
    align-items: center;
    gap: var(--container-gap);
  }

  #logo img {
    height: calc(var(--grid-row-height) / 100 * 50);
  }

  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--container-padding);
  }

    nav ul li a:link, nav ul li a:visited {
      font-weight: var(--fw-bold);
      height: var(--grid-row-height);
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--clr-primary);
    }

    nav ul li a:hover, nav ul li a:active {
      color: var(--clr-accent);
    }

#search {
  padding: 0;
  padding-right: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-padding);
}

  #search form {
    width: 100%;
  }

  input[type=search] {
    border: none;
    width: 100%;
    height: var(--grid-row-height);
    padding: var(--container-padding);
    border-radius: var(--border-radius);
    outline: none;
  }

  #search a {
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: var(--fw-xbold);
  }

main {
  
}

aside {
  position: sticky;
  top: var(--container-gap);
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: max-content;
}

  aside > * {
    border-radius: 8px;
    background-color: white;
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);
  }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--clr-accent) !important;
  color: white;
}

  footer > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--container-gap);
  }

  footer a {
    color: white !important;
    text-decoration: none;
    font-weight: var(--fw-bold);
  }
<html>
  <head>
    <script src="https://kit.fontawesome.com/dee405e1bd.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="grid">
        <nav>
          <div>
            <div id="logo">
              <a href="#"><img src="https://berufsbildungscenter.ch/app/uploads/Logo_KAIO.png"></a>
            </div>
            <ul>
              <li><a href="#"><i class="fas fa-clipboard-list fa-fw fa-2x"></i></a></li>
              <li><a href="#"><i class="fas fa-masks-theater fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
          <div>
            <ul>
              <li><a href="#"><i class="fas fa-sliders fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
        </nav>
        <div id="search">
          <form>
            <input type="search" value="" placeholder="SEARCH">
          </form>
          <a href="#"><i class="fas fa-magnifying-glass"></i></a>
        </div>
      <main>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
        MAIN<br>
      </main>
      <aside>
        <div>
          ASIDE DIV
        </div>
        
        <div>
          ASIDE DIV
        </div>
      </aside>
      <footer>
        <div>
          <span><i class="far fa-copyright"></i>&nbsp;&nbsp;2016&dash;2023 by learni.ch - Ein Produkt der           <a href="https://duolopment.ch" target="_blank">duolopment KLG</a></span>
          <nav>
            <ul>
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
            </ul>
          </nav>
        </div>
        <div>
          <nav>
            <ul>
              <li><i class="fas fa-code"></i>&nbsp;&nbsp;Version: Aphrodite (2.7)</li>
              <li><a href="#">Releasenotes</a></li>
              <li><a href="#">Support</a></li>
            </ul>
          </nav>
        </div>
      </footer>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.