Высота сетки, растягивающаяся по размеру содержимого, но остальная высота остальных ячеек сетки - PullRequest
Новая
       11

Высота сетки, растягивающаяся по размеру содержимого, но остальная высота остальных ячеек сетки

0 голосов
/ 18 апреля 2020

Я пытаюсь сделать разметку сетки. Это код: 

    <div class="wrapper">
        <div class="header">HEADER</div>
        <div class="nav">NAV
        </div>
        <div class="aside-left">LEFT</div>
        <div class="main">MAIN
            <img src="a1.jpeg">
            <img src="a1.jpeg">
            <img src="a1.jpeg">
        </div>
        <div class="aside-right">RIGHT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>

.wrapper{
   height: 100%;
   width: 100%;
   background-color: ghostwhite;
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-template-rows: minmax(100px,auto);
   grid-gap:5px;
   }
   .header{
       grid-column: 1/13;
       grid-row: 1/2;
   }
   .nav{
       grid-column: 1/13;
       grid-row: 2/3;
   }
   .aside-left{
       grid-column: 1/3;
       grid-row: 3/10;
   }
   .main{
       grid-column: 3/11;
       grid-row: 3/10;
   }
   .aside-right{
       grid-column: 11/13;
       grid-row: 3/10;
   }
   .footer{
       grid-column: 1/13;
       grid-row:10/12;
   }

Я хочу, чтобы класс main растянулся, чтобы соответствовать его содержимому, и он работает, но .nav и .footer не занимают минимальную высоту 100px, но они Похоже, что он тоже принимает высоту авто, однако класс заголовка работает правильно, так что есть идеи? Я хочу, чтобы другие элементы имели как минимум 100px высоту

1 Ответ

0 голосов
/ 18 апреля 2020

Я разобрался с ответом: 

body, html{
    background-color: ghostwhite;
    height: auto;

}
.wrapper{
    max-height: auto;
    width: 100%;
    background-color: ghostwhite;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: minmax(100px,auto);
    grid-gap:5px;
}

кажется, что 100% -ная высота учитывала высоту других элементов, увеличивая при этом другие

...