Есть ли способ сделать это только с помощью CSS?
Вы можете использовать позиционирование.
HTML: оберните содержимое в дополнительный контейнерaside { position: relative; } .aside__inner { position: absolute; }
articleCSS:
grid-template-rows: auto min-content autocodepen
- Если вам нужен верхний и нижний колонтитулы для расширения, чтобы
articleон был только высок, как его содержимое, вы можете добавитьbodyегоmin-width. - Я также предлагаю использовать
widthвместоasideнаaside
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>