0
私のウェブサイトに問題があります。私はtransform: translate(-50%,-50%);を使用して私のウェブページをページの真ん中になく、ちょっと中央から外しています。今IVEに問題があります：私はスクロールできません！CSS変換翻訳cantスクロール
作業Webページの例と悪い1： 
テキストがページをあふれて見ることができるように。どのように私はこれを修正することができますか？ 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>
こんにちはPaul、あなたのコードをテストするための素早いフィドルを作ってください。 –
確かに、私は試してみてください。私は過去に多くの幸運を持っていましたが、時間をくれました。これは大丈夫ですか？ –