Вопрос:
Я пытаюсь css grid div с расширением содержимого, чтобы показать все содержимое на его странице вниз div.
Я пытался использовать overflow-y: скрыто в div 'item-area' (container) и 'item-grid', но это приводит к тому, что div обрезает содержимое в div 'item-grid'. Делая видимым переполнение-y, div 'area-area' не расширялся. Обратите внимание, что нижний колонтитул ниже использует display: flex, но не имеет абсолютной позиции.
Применить высоту 100vh (а также минимальную высоту 100vh), чтобы div 'item-area' не работал. Без каких-либо свойств переполнения, примененных к 'item-grid', он может прокручиваться в пределах 'item-area' вместо возможности прокрутки на странице. Я попытался сделать класс * {} в styles.css, чтобы иметь высоту: 100vh, но он заставил каждый div иметь полосы прокрутки. Добавление класса для html, body {}, чтобы иметь высоту 100vh, не влияло на страницу.
render(){
const { slidervalue } = this.state
return(
<div id="item-area">
<div id="side-menu">
<h3>Filters</h3>
<div className="size-box">
<h5>Size:</h5>
<ul>
<li className="">
<a>
<label class="container">XS
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
<li className="">
<a>
<label class="container">S
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
<li className="">
<a>
<label class="container">M
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
<li className="">
<a>
<label class="container">L
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
<li className="">
<a>
<label class="container">XL
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
<li className="">
<a>
<label class="container">XXL
<input type="checkbox" />
<span class="checkmark"></span>
</label>
</a>
</li>
</ul>
</div>
<div className="color-box">
<h5>Color:</h5>
<ul className="color-list">
<li className="swatch color-swatch-black pointer">
<a> </a>
</li>
<li className="swatch color-swatch-blue pointer">
<a> </a>
</li>
<li className="swatch color-swatch-red pointer">
<a> </a>
</li> <br />
<li className="swatch color-swatch-nude pointer">
<a> </a>
</li>
<li className="swatch color-swatch-white pointer">
<a> </a>
</li>
<li className="swatch color-swatch-grey pointer">
<a> </a>
</li> <br />
<li className="swatch color-swatch-purple pointer">
<a> </a>
</li>
<li className="swatch color-swatch-brown pointer">
<a> </a>
</li>
<li className="swatch color-swatch-yellow pointer">
<a> </a>
</li> <br />
<li className="swatch color-swatch-orange pointer">
<a> </a>
</li>
<li className="swatch color-swatch-pink pointer">
<a> </a>
</li>
<li className="swatch color-swatch-green pointer">
<a> </a>
</li> <br />
</ul>
</div>
<div className="price-range">
<h5 className="">Price:</h5>
<ul className="prices">
<li><a className="pointer">$10</a></li>
<li><a className="pointer">$20</a></li>
<li><a className="pointer">$30</a></li>
<li><a className="pointer">$40</a></li>
<li><a className="pointer">$50</a></li>
<li><a className="pointer">$100</a></li>
</ul>
</div>
</div>
<div id="item-grid">
<div className="item-product">
<img className="item" src="/tops/1.jpg" />
<p className="item-name">Light Blue Dress</p>
<p className="item-price">$20</p>
</div>
<div className="item-product">
<img className="item" src="/tops/4.jpg" />
<p className="item-name">Nude Dress with Blue Floral Design</p>
<p className="item-price">$20</p>
</div>
<div className="item-product">
<img className="item" src="/tops/5.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/6.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/7.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/8.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/9.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/3.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
<div className="item-product">
<img className="item" src="/tops/3.jpg" />
<p className="item-name">White Dress with Black Design</p>
<p className="item-price">$15</p>
</div>
</div>
</div>
);
}
#item-area{
display: grid;
grid-template-columns: 25% 75%;
/* height: 100vh; */
height: 100vh !important;
min-height: 100vh !important;
margin: 30px 30px;
align-items: stretch;
overflow-y: hidden;
position: relative;
}
#side-menu{
/* background-color: #33bced; */
min-height: 100vh;
overflow-y: hidden;
}
.size-box{
}
.size-box ul{
list-style-type: none;
}
#item-grid{
/* background-color: #50D050; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
padding-left: 50px;
height: 100vh;
min-height: 100vh;
overflow-y: hidden;
}
.item-product{
height: 600px;
}
.item{
height: 500px;
}
#footer{
text-align: center;
justify-content: center;
display: flex;
flex-direction: row;
}
.footer_item{
margin-left: 30px;
margin-right: 30px;
width: 200px;
text-align: center;
}
.footer_item ul{
padding: 0 !important;
list-style: none;
}
[введите описание изображения здесь] [1]
Оцените любые предложения, которые я могуполучить, как я вроде как бился головой с точки зрения заставить его работать.
Спасибо - Адам H
Примечание: включенное изображение использует свойство overflow-y: hidden в обоих контейнерах div'item-area' (включает в себя фильтры бокового меню и item-grid) и 'item-grid' (сетка списка продуктов).
[1] Переполнение-y скрыто https://i.stack.imgur.com/g3BWA.jpg (ссылка)
[2]: переполнение-y авто https://i.stack.imgur.com/n8rla.jpg