主页 / 问题 / 1103737
Accepted
ioprst
Asked:2020-04-01 15:25:25 +0000 UTC2020-04-01 15:25:25 +0000 UTC

如何正确实现可滚动块？

  • 772

需要在页面上插入一个带有链接的块，如果该块不适合页面，可以滚动该块。很清楚用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>

html

1 个回答

  1. Best Answer

    决定了。需要隐藏滚动条.main

    * {
    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';
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /*с auto тоже работает*/
}

.footer {
    grid-area: footer;
    background-color: #00d3ec; /*delete*/
}

.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>

    • 2

相关问题