CSS сетка, автоматическая высота с более сложным макетом - PullRequest
0 голосов
/ 05 июля 2018

Я получил что-то вроде этого: https://jsfiddle.net/q0apor3u/10/

.layout-grid__navbar    { grid-area: navbar; }
.layout-grid__sidebar   { grid-area: sidebar; }
.layout-grid__header    { grid-area: header; }
.layout-grid__main      { grid-area: main; }
.layout-grid__aside     { grid-area: aside; }
.layout-grid__footer    { grid-area: footer; }

.layout {
  display: grid;

  grid-template-areas:
    "navbar navbar navbar"
    "sidebar header aside"
    "sidebar main aside"
    "sidebar footer aside";

  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
}

.layout-grid__navbar  {
  height: 60px;
}

.layout-grid__sidebar {
  width: 240px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="layout">

  <header class="layout-grid__navbar bg-success">
    Navbar
  </header>

  <nav class="layout-grid__sidebar bg-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim tellus quis nibh euismod, a volutpat magna vestibulum. Nunc a laoreet mauris, in ullamcorper felis. Donec porttitor cursus vestibulum. Maecenas nunc massa, laoreet nec erat ut, commodo consectetur leo. Cras imperdiet, justo sit amet luctus sollicitudin, massa velit luctus sem, non rutrum sapien magna eget erat. Maecenas ornare tortor ac lorem bibendum ullamcorper. Morbi eget mi quam. Quisque pellentesque sapien eu urna laoreet, in sollicitudin urna tempor. Morbi a faucibus augue, vitae aliquam leo. Nunc efficitur, orci in rutrum mattis, lacus eros pretium sem, a vestibulum nisi sem vel nisi.Nulla ultricies, nisi et sodales semper, justo nisi imperdiet sapien, quis pulvinar dui lorem quis enim. Integer sed erat auctor sapien fermentum mattis a eget velit. Pellentesque a tempor est. Vivamus ullamcorper, tortor at feugiat cursus, sapien mauris imperdiet magna, ac accumsan ante nisl quis dolor. Sed rhoncus justo est, vel dapibus sapien posuere sit amet. Aenean consequat ultricies felis a ultricies. Vivamus et semper quam, et facilisis ligula. Sed sed ex vitae mauris aliquet imperdiet. Donec nec ornare ligula. Sed imperdiet aliquam viverra.Duis vestibulum massa orci, eu iaculis massa ullamcorper vel. Quisque ac pharetra libero. Nulla at augue neque. Donec porttitor est a arcu vehicula, ac fermentum elit molestie. Nullam vulputate lectus nec orci tincidunt feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eget elit ac sapien pretium mollis vitae euismod nunc. Proin ligula nulla, viverra ut mi quis, imperdiet egestas ligula. Donec quis sodales turpis, sed elementum nisl. Phasellus ac tempor diam. Aenean tempor est leo. Cras tincidunt volutpat eros, id rutrum justo blandit quis. Praesent suscipit nec justo sit amet volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis, neque vel porttitor lobortis, arcu metus aliquam tortor, ac consectetur lorem quam vitae felis. Suspendisse potenti.Donec pharetra est eget turpis consectetur, nec lacinia neque laoreet. Nam tempus pulvinar eros, vitae tincidunt lectus ultricies tempor. Donec risus justo, congue sit amet mollis pharetra, pharetra ac erat. Vivamus malesuada efficitur elit, at pellentesque augue lobortis eget. Mauris ut scelerisque ligula. Donec ut leo malesuada, facilisis ex nec, mattis turpis. Nulla consectetur quam at velit faucibus, non semper lectus egestas. Maecenas et accumsan velit, id accumsan augue.Maecenas tempor diam sem, non malesuada libero faucibus ac. Nullam finibus ipsum pharetra enim convallis, a suscipit urna tincidunt. Sed accumsan arcu eget massa consequat consequat. Maecenas eu tincidunt felis, et aliquam ipsum. Suspendisse vestibulum posuere mi sed semper. Pellentesque mattis commodo dictum. Nulla eget lorem leo. Quisque convallis scelerisque tellus a pharetra. Integer suscipit arcu id turpis tincidunt, vel fermentum sem feugiat. Fusce convallis dignissim lobortis. Curabitur in vehicula nibh, at commodo odio. 
  </nav>

  <header class="layout-grid__header bg-warning">
    Header
  </header>

  <main class="layout-grid__main bg-danger">
    Main
  </main>

  <aside class="layout-grid__aside bg-dark">
    Aside
  </aside>

  <footer class="layout-grid__footer bg-light">
    Footer
  </footer>

</div>

И, как вы видите, у меня проблема с текстовым столбцом. Есть ли способ, которым высота столбца растягивается до содержимого, сохраняя текущую структуру HTML? Заранее спасибо за ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...