Необходимо вставить на страницу блок с ссылками, который можно скроллить, если блок не помещается на страницу. Понятно, что делается с помощью overflow: auto;
. Когда использовал табличную верстку, все работало нормально (только почему-то скролл вылезал за границы блока). Сейчас делаю верстку с помощью гридов.
Макет:
При большом списке ссылок в tag-list скролл появляется не для блока tag-list, а для всей страницы
Хотелось бы получить результат вида (табличная верстка)
Подскажите, пожалуйста, как можно реализовать. Спасибо.
Код
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
font-family: Consolas, sans-serif;
}
.wrapper {
display: grid;
grid-template-areas:
'header'
'main'
'footer';
grid-template-rows: auto 1fr auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.header {
grid-area: header;
background-color: #00d3ec; /*delete*/
}
.main {
grid-area: main;
display: grid;
grid-template-areas:
'tag-list tag-info';
/*grid-template-columns: auto 1fr;*/
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.footer {
grid-area: footer;
background-color: #00d3ec; /*delete*/
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.sub-gird {
display: grid;
grid-template-areas:
'tag-list tag-info';
grid-template-columns: 200px 1fr;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.tag-list {
grid-area: tag-list;
min-width: 200px;
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
.tag-list > a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
.tag-info {
grid-area: tag-info;
}
.tag-info > table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<p style="text-align: center">Header</p>
</header>
<main class="main">
<!-- <div class="sub-grid">-->
<div class="tag-list">
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
<a href="#">tag1</a>
</div>
<div class="tag-info">
<table>
<tr><th>Параметр</th><th>Значение</th></tr>
</table>
</div>
<!-- </div>-->
</main>
<footer class="footer">
<p style="text-align: center">Footer</p>
</footer>
</div>
</body>
</html>