html - HTML 和 CSS - 布局问题（使用网格和 flexbox）

问题描述

代码笔： https ://codepen.io/pprunesquallor/pen/qKxvrX

我是一个使用网格和 flexbox 的初学者。

我希望文章元素（黄色）的高度只有文本需要的长度（所以在这种情况下 cca 是一半长），因此旁边的元素（灰色）应该具有相同的高度，具体取决于文章的高度，并且可以滚动。

先感谢您！！

html, body {
    height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  align-items: stretch;
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  background-color: lime;
}

header > h1 {
  margin: 0;
  background-color: brown;
}

nav {
    display: flex;
    flex-direction: row;
    background-color: orange;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  background-color: red;
}

article {
  background-color: yellow;
}

aside {
  width: 50%;
  overflow: auto;
  overflow-y: scroll;
  background-color: grey;
}

footer {
  grid-area: footer;
  background-color: pink;
}

<html lang="en">
  <body>
    <header>
      <h1 id="title">Header Title</h1>
      <nav>   
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 1</button>
        </form>        
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 2</button>
        </form>        
        <form style="display: inline" action="http://google.com" target="_blank">
          <button>Link 3</button>
        </form>
      </nav>
    </header>
    <main id="main">
      <article id="info">
        <h2>Article Title</h2> 
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.         
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <a id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
        <br>
        Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
      </article>
      <aside><h3>Aside</h3>
          Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis. 
          <br>
          Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis. 
          <br>
          Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
      </aside>
    </main>
    <footer>Footer</footer>
  </body>
</html>

标签： htmlcssflexboxcss-grid

解决方案

有没有办法只用 CSS 做到这一点？

你可以使用定位。

HTML：将内容包装aside在一个额外的容器中

<aside>
  <div class="aside__inner">
    ...content...
  </div>
</aside>

CSS：

aside { 
  position: relative;
}

.aside__inner {
  position: absolute;
}

密码笔

如果您需要扩展页眉和页脚以使其article仅与其内容一样高，您可以添加grid-template-rows: auto min-content auto到body.
我也建议使用min-width代替widthaside

html,
body {
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
  align-items: stretch;
  /* added */
  grid-template-rows: auto min-content auto;
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  background-color: lime;
}

header>h1 {
  margin: 0;
  background-color: brown;
}

nav {
  display: flex;
  flex-direction: row;
  background-color: orange;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  background-color: red;
}

article {
  background-color: yellow;
}

aside {
  width: 50%;
  overflow: auto;
  overflow-y: scroll;
  background-color: grey;
  position: relative;
}

.aside__inner {
  position: absolute;
}

footer {
  grid-area: footer;
  background-color: pink;
}

<html lang="en">

<body>
  <header>
    <h1 id="title">Header Title</h1>
    <nav>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 1</button>
      </form>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 2</button>
      </form>
      <form style="display: inline" action="http://google.com" target="_blank">
        <button>Link 3</button>
      </form>
    </nav>
  </header>
  <main id="main">
    <article id="info">
      <h2>Article Title</h2>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      <a
        id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec
        feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci
        leo et ex. Vivamus ut aliquet massa.
        <br> Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus
        vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis
        consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
    </article>
    <aside>
      <div class="aside__inner">
        <h3>Aside</h3>
        Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet
        odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis
        placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum
        at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
        <br> Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere.
        Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
        <br> Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa,
        sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
      </div>
    </aside>
  </main>
  <footer>Footer</footer>
</body>

</html>

html - HTML 和 CSS - 布局问题（使用网格和 flexbox）

问题描述

解决方案

推荐阅读