CSS grid, максимальная высота 100% по экрану без увеличения дочерних элементов

158
06 августа 2018, 22:00

Подскажите, пожалуйста:

<div id="a1">
 <div id="a2">Content</div>
 <div id="a3">Content2</div>
</div>

Имея #a1 display:grid и height:100% по экрану, #a2 и #a3 grid-template-row по 1fr, увеличивая #a2 по вертикали, мне необходимо добиться #a2 overflow-y:scroll. Но общая высота и #a2 и #a3 увеличится взаимно, при этом увеличивая высоту #a1 выше 100% по экрану. Возможно ли зафиксировать высоту #a1 с применением overflow-y в #a2 и #a3?

Answer 1

Из вашего описания точно непонятно, но похоже, что вы имели в виду что-то такое.

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
#a1 { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  border: 1px solid; 
  height: 100vh; 
} 
 
#a2, #a3 { 
  border: 1px solid #ccc; 
} 
 
#a3 { 
  max-height: 100vh; 
  overflow: auto; 
}
<div id="a1"> 
 <div id="a2">Content</div> 
 <div id="a3"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quibusdam veritatis nostrum dicta consequuntur, maiores error iusto incidunt enim vel culpa neque eaque hic at expedita, maxime officia natus, minus officiis ipsam temporibus. Temporibus consequuntur laborum et quod voluptatibus, neque laboriosam. Consequatur, nulla, quisquam mollitia ab fugit fugiat sint provident aliquid accusantium repellat consequuntur. Adipisci ullam magnam reiciendis id fugiat, quaerat eligendi, quisquam voluptatibus eaque officia quo aliquam illum aut nisi quas error. Laudantium alias reiciendis illum numquam aliquam maiores, quod nam omnis expedita cupiditate, dolore nobis mollitia quas architecto odio, eum quia voluptas enim. Odio blanditiis ut nemo beatae asperiores voluptatem illum temporibus quam, numquam, aut nobis! Perspiciatis alias in ut ratione enim ea sapiente corporis. Fuga ipsum saepe incidunt quo molestiae soluta recusandae repellendus quos fugiat quibusdam iste unde, inventore eaque in nulla maiores est reiciendis et dolore obcaecati odit voluptatum dolor autem, dolorem. Nesciunt voluptatem aperiam inventore consequatur repudiandae harum dolores aliquid laborum pariatur cupiditate, deleniti odio similique facere ab amet cumque accusamus tenetur labore minus vel illum et vero explicabo, quam sit! Ducimus quis asperiores dicta dolore iure magnam corrupti odio expedita veritatis molestias, pariatur modi. Et, laborum nisi iusto odio, quidem, quis dolorem ducimus tempore dolore inventore officia! Minus enim dignissimos repudiandae architecto. Harum possimus veritatis excepturi iusto, assumenda expedita eos officia sapiente cupiditate saepe autem minima hic. Voluptate architecto debitis doloremque voluptatem autem labore totam, commodi, corporis! Est, provident. Quas, quis. Necessitatibus ab quibusdam illum et autem nisi porro dignissimos praesentium mollitia, deserunt nulla obcaecati tenetur! Eveniet delectus, tenetur, doloremque dolores veniam aliquid nulla ducimus incidunt mollitia reiciendis nisi, excepturi, at! Est earum accusantium harum quibusdam, dolorem, placeat quaerat? Explicabo eligendi dolor sapiente ratione asperiores iste quae, ut mollitia, inventore odit doloribus. Laborum repellendus illo odit dicta ea illum tempore officiis reiciendis autem ex debitis, necessitatibus eius nam consequatur reprehenderit architecto beatae voluptatibus cum. Commodi velit consequatur blanditiis eligendi, nam tenetur ipsum sed, dolor. Id, atque laborum molestiae minus deleniti magni beatae facilis necessitatibus non unde, porro neque assumenda vitae deserunt ratione. Aut rem deserunt laudantium, esse omnis, nisi assumenda perferendis fugit voluptates eum dolorum consequatur? Incidunt eos, dolore, impedit deserunt aliquid consequatur quaerat numquam soluta temporibus repellat. Qui delectus dolor quibusdam, ab provident quos itaque laboriosam animi totam maxime voluptatem nulla nesciunt labore quo aspernatur vel quae, veniam aliquid, eos, eligendi necessitatibus illo ipsum! Aliquid nam voluptas sed soluta, quidem laboriosam error, aut rerum iure. Voluptas blanditiis possimus dolor impedit fuga assumenda, neque commodi ut expedita animi, tenetur ratione laudantium error minus modi praesentium, et quam quae nostrum debitis. Itaque nobis error atque. Eaque aspernatur optio, quaerat ratione distinctio veritatis quo odio, molestiae fugit a vitae neque, debitis blanditiis. Quibusdam, reprehenderit. Perferendis blanditiis reiciendis eos deserunt sapiente ullam alias quaerat, recusandae cum autem nam, odio delectus vel ratione placeat nisi culpa. Neque deleniti ut ex eligendi velit tempora. Vel dignissimos at maiores optio aspernatur obcaecati, ex quas perferendis cum commodi. Deleniti officiis, enim illum maiores? Odit, facilis, repudiandae? Velit sit, perspiciatis aperiam itaque natus perferendis unde dolores, fugit delectus quis obcaecati voluptas cum similique nihil suscipit laudantium? Eveniet saepe quas non quisquam sint libero quod vel nesciunt, dignissimos neque odit aliquam maxime perferendis, et ad delectus, quo reiciendis minima alias omnis, assumenda aspernatur? Quos, ipsam quod est obcaecati, magni natus velit cumque repellendus aliquid, adipisci voluptas dolorem maiores eum pariatur optio laudantium similique quas, harum! Ullam et cupiditate eligendi mollitia itaque officia a distinctio consequuntur nostrum iure. Molestiae asperiores quasi laboriosam enim aspernatur expedita, sapiente cupiditate culpa, dolorum hic soluta quidem voluptatibus. Esse optio, omnis error inventore ratione cum repellat accusamus placeat ab perferendis laudantium, in iste maiores aperiam tempora. Omnis beatae neque molestias, cumque vero a maiores suscipit, commodi aperiam sed laborum similique explicabo, culpa magnam labore nisi vel. Est velit illum officiis, magni a quo minus quae animi quod explicabo voluptatibus reprehenderit nam architecto accusantium exercitationem, praesentium ipsa! Harum, nesciunt, quaerat. Tempore ex, ut a non doloremque reprehenderit quam nobis repudiandae ea animi alias excepturi in nam, suscipit sit possimus, assumenda ratione similique quas dignissimos neque quae quasi maiores! Beatae voluptates, ut recusandae nesciunt, pariatur ratione maiores nihil? Temporibus, sint, deserunt. Molestiae velit eaque dicta itaque, veritatis facilis repellendus animi natus provident quos inventore aliquam ut sint ipsum, repellat sapiente! Officiis amet vero at, sequi similique illum nobis iste molestias, cupiditate voluptate aliquam. Harum laudantium molestias assumenda. Nisi fugiat cum voluptatum pariatur, deleniti, recusandae quos fuga voluptatem iusto nulla iste laborum dolorem. Facilis earum pariatur corrupti rem voluptas aut sequi corporis laudantium porro laboriosam, repudiandae, reiciendis possimus. Ullam est incidunt, facere architecto delectus nobis eaque officia expedita saepe distinctio. Inventore blanditiis facere assumenda voluptatum fugit architecto saepe natus beatae earum, ut, sed atque! Repellendus blanditiis sit exercitationem molestias quos, similique voluptas ab in, perspiciatis commodi dolorum velit magni, consectetur eligendi eius deserunt. Earum modi minus autem praesentium incidunt hic totam fuga voluptates animi nostrum. Odio quibusdam iure voluptatem, obcaecati, quisquam iusto sunt error eaque sequi magnam est sit ut fugit officiis laborum at sint rem cupiditate blanditiis unde quidem. Quibusdam, optio cumque, impedit eligendi quaerat aut deleniti modi accusamus praesentium et illo illum? Eaque fugiat voluptates sequi nesciunt dolor molestias excepturi hic suscipit, necessitatibus cupiditate doloremque ullam adipisci. Suscipit error similique sed, possimus placeat quia? Blanditiis sapiente voluptatibus laboriosam quasi reiciendis numquam eaque nemo, ea suscipit similique, ex, molestiae distinctio? Similique quos cumque explicabo odit, necessitatibus at dignissimos suscipit, aliquid quo fugiat dolorem neque. Quo possimus, excepturi placeat debitis adipisci ex sed, id a quis tenetur perferendis quidem optio cumque voluptatibus dolores quisquam minima nesciunt autem recusandae assumenda itaque rerum. Tenetur ipsa aliquam, voluptatibus fugit? Necessitatibus, vel, error. Quae officiis alias, aut obcaecati numquam, deserunt nihil iure ullam. Error perferendis totam dignissimos voluptatibus ad vel quam ab ratione, fugit architecto quisquam voluptate enim nesciunt dolore iste autem saepe aliquid harum dolor odio! Laboriosam quae numquam autem rerum sunt quas eaque est officia, voluptates quasi, aliquam eligendi in vero. Optio fugiat officia libero, quibusdam at dolor ipsam aut, facilis cum, atque vero.</p> 
 </div> 
</div>

READ ALSO
Как нарисовать и аниммировать svg линии?

Как нарисовать и аниммировать svg линии?

Как в SVG нарисовать и анимировать 2 линии, чтобы сначала "нарисовалась" одна прямая, затем вторая?

133
Как добавить значение из переменной в объект data для выполнения ajax запроса?

Как добавить значение из переменной в объект data для выполнения ajax запроса?

друзья! Для передачи в ajax запрос собираю данные из формы методом serializeArrayКак можно добавить значение из переменной, не связанной с формой,...

186