需要在页面上插入一个带有链接的块,如果该块不适合页面,可以滚动该块。很清楚用overflow: auto;
. 当我使用表格布局时,一切正常(只是出于某种原因,滚动爬出了块边界)。现在我正在使用网格进行布局。
布局:
在标签列表中有大量链接时,滚动出现的不是标签列表块,而是整个页面
我想得到表格的结果(表格布局)
请告诉我如何实施。谢谢你。
编码
* {
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>
决定了。需要隐藏滚动条
.main