Question

我的网站出现了问题，我使用transform: translate(-50%,-50%);来修复我的网页不在页面中间但稍微偏离中间位置。现在我遇到了一个问题：我不能滚动！

工作网页和坏网页的示例：

正如您所看到的那样，文本溢出了页面。我怎么能解决这个问题？

'innerlayer'的完整CSS代码

    .innerlayer {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-origin: 0 0;
    background-color: dodgerblue;
    box-shadow: 10px 10px 40px #6680ed;
    min-width: 50%;
    max-width: 50%;
    border: 1px solid black;
}

html {
    padding: 0;
}
body {
    background-color: cornflowerblue;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.contentlayer {
    text-align: center;
}
.innerlayer {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-origin: 0 0;
    background-color: dodgerblue;
    box-shadow: 10px 10px 40px #6680ed;
    min-width: 50%;
    max-width: 50%;
    border: 1px solid black;
}
.header {
    font-weight: bolder;
    font-family: Calibri;
    font-size: 30pt;
    border-bottom: 1px solid black;
}
.navigation {
    border-bottom: 1px solid black;
    background-color: #6499f1;
}

ul {
    list-style: none;
    margin: 0;
    padding: 10 0;
}
li {
    background-color: #6499f1;
    border-left: 1px solid black;
    padding: 10 10;
    margin-right: -4px;
    font-family: Arial;
    font-weight: bold;
    text-decoration: none;
    display: inline;
}
li:last-child {
    border-right: 1px solid black;
}
li:hover {
    background-color: #6490e8;
}
.body {
    font-family: Arial;
}
.bodytitle {
    font-weight: bolder;
    font-family: Calibri;
    font-size: 15pt;
    padding: 5 0;
}
.bodytext {
    padding: 5 5;
}
.border-bottom {
    border-bottom: 1px solid black;
}
.border-top {
    border-top: 1px solid black;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="css/jquery-3.1.1.min.js"></script>
    <title>Title</title>
</head>
    <body id="body">
            <div class="outerlayer" id="outerlayer">
                <div class="innerlayer" id="innerlayer">
                    <div class="contentlayer">
                        <div class="header">
                            <?php echo $obj1[0]['name'] . " [" . $_GET['id'] . "]"; ?>
                        </div>
                        <div class="navigation">
                            <ul>
                                <li>Information</li>
                                <li>Statistics</li>
                                <li>Back</li>
                            </ul>
                        </div>
                        <div class="body">
                            <div class="bodytitle border-bottom">
                                Background Introduction
                            </div>
                            <div class="bodytext">
                            </div>
                            <div class="bodytitle border-bottom border-top">
                                Economy - overview
                            </div>
                            <div class="bodytext">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus facilisis sollicitudin. Donec consectetur consectetur libero sed gravida. Nulla sit amet vehicula felis. In dapibus dui odio, id venenatis ante sollicitudin at. Aenean molestie lectus leo, in egestas mi tristique sit amet. Integer faucibus feugiat feugiat. Vestibulum ac porttitor dolor.

Vestibulum consectetur ornare magna, id suscipit lectus posuere ut. In dictum ornare fringilla. Quisque convallis ac libero vel vulputate. In hendrerit dolor id dapibus auctor. Donec ac nisl quis nulla volutpat condimentum ac eu velit. Nullam pretium neque tempor luctus pretium. Fusce quis diam sollicitudin, vestibulum sapien vitae, faucibus risus. Vestibulum tincidunt libero nec auctor maximus. Sed ultrices sem at nunc condimentum egestas. Praesent eu enim bibendum, consequat neque sed, sollicitudin diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eget maximus leo, eu feugiat purus. Nullam semper mauris id erat rhoncus malesuada. Cras nulla diam, euismod id purus eget, ultrices efficitur velit. Donec elementum auctor ex. Nunc condimentum placerat ex eget maximus.

Quisque dignissim, erat non lobortis egestas, enim justo cursus lectus, ac semper felis diam et eros. Sed scelerisque, nulla at vehicula ullamcorper, sem est pretium nisi, in consequat sapien lorem id erat. Aenean et dolor eget velit consectetur venenatis vel sit amet tellus. Fusce in venenatis nibh, vel euismod magna. Nunc sed libero vitae urna ullamcorper iaculis. Donec massa ipsum, mattis eu sollicitudin eu, porta non arcu. In porttitor turpis at purus aliquet consequat. Aliquam massa orci, tempus et suscipit et, tincidunt eu leo. Curabitur porta felis nunc, nec porttitor arcu mollis rhoncus. Vivamus vel sapien eleifend, hendrerit diam non, feugiat orci.

Nam consectetur ante ac consectetur eleifend. Vestibulum porta, tellus ut fermentum auctor, leo orci tincidunt metus, vitae tincidunt diam ex at quam. Integer nec placerat libero. Maecenas metus est, convallis a bibendum eget, dictum sit amet nunc. Nam ut nibh blandit, porta risus dapibus, imperdiet dolor. Donec viverra lectus non eros porttitor, non eleifend est ullamcorper. Etiam sed metus in nunc mollis hendrerit. Cras nec felis purus. Morbi nec posuere velit. Vivamus interdum convallis odio, sit amet tempor eros tempor non. Praesent vulputate mi sit amet nibh convallis luctus. Suspendisse vitae nisl vitae mauris scelerisque dictum in ut libero. Nam rutrum justo ex, id luctus risus laoreet vel. Aliquam non pulvinar orci, non maximus massa. Nulla condimentum orci sollicitudin libero faucibus, in rutrum neque suscipit.

Vestibulum aliquet ornare libero, ac luctus enim cursus ut. In scelerisque feugiat felis at viverra. Nam quis neque vestibulum, accumsan lorem nec, faucibus ligula. Sed feugiat quam ex, non commodo felis rutrum in. Nunc aliquet turpis in diam efficitur, vitae bibendum sapien dictum. Cras a pulvinar enim, hendrerit consequat erat. Pellentesque viverra viverra lorem, nec mattis eros dictum sed. Proin ut metus augue. Proin quis fermentum urna. Vestibulum lobortis augue a sapien iaculis, vitae vehicula magna pharetra. In suscipit ex ipsum. Aenean id efficitur massa. Vestibulum varius consectetur purus, ac ultricies leo scelerisque quis. Duis urna nisi, vehicula semper nulla nec, pellentesque dignissim nibh.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>
</html>

Answer 1

将此类添加到您的css文件，并在该div上显示滚动条，但如果您想在整个页面上添加滚动条（如普通页面），则必须将div翻译为body但尝试添加此css代码到css文件并希望它工作：

.innerlayer {
height: 100%;
overflow-y: scroll;
}

CSS转换翻译不能滚动

1 个答案: