我的网站出现问题，我正在使用 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>最佳答案
将此类添加到您的 css 文件中，并在该 div 上显示滚动条，但是如果您想像普通页面一样在整个页面上添加滚动条，那么您必须将 div 翻译为 body 但尝试添加此 css代码到 css 文件并希望它能工作:
.innerlayer {
height: 100%;
overflow-y: scroll;
}
关于CSS转换翻译不能滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41198617/