0
Der folgende Code ist Teil einer benutzerdefinierten 404-Seite, die ich auf einer Website von mir planen. Allerdings gibt es ein großes Problem, wenn ich die Codezeile hinzufügen overflow-y: auto;CSS-Eigenschaft "overflow-y: auto" verursacht sehr unerwartete Ergebnisse
Der Code unten hat die Ausgabe, die ich erwartet hatte. Wenn es jedoch der Code innerhalb der div mehr als 75vh erreicht, ist der Überlauf nicht sichtbar.
* {
margin: 0;
\t padding: 0;
}
.main {
\t min-height: 100vh;
\t font-size: 1em;
\t overflow-Y: hidden;
}
.center {
\t float: left;
\t position: relative;
\t left: 50%;
}
.wrap {
\t width: 100%;
\t float: left;
\t position: relative;
\t left: -50%;
}
.load_extra {
\t display: block;
\t position: fixed;
\t z-index: 11;
\t bottom: 15px;
}
.prep {
\t align: center;
\t background: #00eaff;
\t outline: none;
\t padding: 8px;
\t color: white;
\t border-color: white;
\t border-style: dotted;
\t border-width: 3px;
\t border-radius:50%;
\t font-size: 1.375em;
}
.extra {
\t display: block;
\t position: fixed;
\t bottom: 10px;
\t max-height: 75vh;
\t width: 80vw;
\t z-index: 10;
}
pre {
\t font-family: monospace, monospace;
\t font-size: 0.85em;
\t display: block;
\t overflow-y: auto;
\t word-break: break-all;
\t white-space:normal;
\t padding: 10px;
\t margin: 0 0 10px;
\t line-height: 1.42857143;
\t color: #333;
\t word-break: break-all;
\t word-wrap: break-word;
\t background-color: #f5f5f5;
\t border: 1px solid #ccc;
\t border-radius: 4px;
\t max-height: 50vh;
}<body class="main">
\t <div class="center load_extra">
\t \t <div class="wrap">
\t \t \t <button id="extra" class="prep">Button</button>
\t \t </div>
\t </div>
\t
\t <div id="infoCont" class="center extra">
\t \t <div class="wrap">
\t \t \t <h1>Extra Information</h1>
\t \t \t <pre>Some URL</pre>
\t \t \t <p>The requested URL shown above could not be found on the server</p>
\t \t \t <hr>
\t \t </div>
\t </div>
</body>Um dieses Problem zu beheben, habe ich die Linie overflow-y: auto; in .extra Klasse. Dies verursachte ein Problem. Wenn Sie den Code unter der Hälfte ausführen, ist die Ausgabe "fehlt". Ich bin mir nicht sicher, warum dies geschieht.
* {
\t margin: 0;
\t padding: 0;
}
.main {
\t min-height: 100vh;
\t font-size: 1em;
\t overflow-Y: hidden;
}
.center {
\t float: left;
\t position: relative;
\t left: 50%;
}
.wrap {
\t width: 100%;
\t float: left;
\t position: relative;
\t left: -50%;
}
.load_extra {
\t display: block;
\t position: fixed;
\t z-index: 11;
\t bottom: 15px;
}
.prep {
\t align: center;
\t background: #00eaff;
\t outline: none;
\t padding: 8px;
\t color: white;
\t border-color: white;
\t border-style: dotted;
\t border-width: 3px;
\t border-radius:50%;
\t font-size: 1.375em;
}
.extra {
\t display: block;
\t position: fixed;
\t bottom: 10px;
\t max-height: 75vh;
\t width: 80vw;
\t z-index: 10;
\t overflow-y: auto;
}
pre {
\t font-family: monospace, monospace;
\t font-size: 0.85em;
\t display: block;
\t overflow-y: auto;
\t word-break: break-all;
\t white-space:normal;
\t padding: 10px;
\t margin: 0 0 10px;
\t line-height: 1.42857143;
\t color: #333;
\t word-break: break-all;
\t word-wrap: break-word;
\t background-color: #f5f5f5;
\t border: 1px solid #ccc;
\t border-radius: 4px;
\t max-height: 50vh;
}<body class="main">
\t <div class="center load_extra">
\t \t <div class="wrap">
\t \t \t <button id="extra" class="prep">Button</button>
\t \t </div>
\t </div>
\t
\t <div id="infoCont" class="center extra">
\t \t <div class="wrap">
\t \t \t <h1>Extra Information</h1>
\t \t \t <pre>Some URL</pre>
\t \t \t <p>The requested URL shown above could not be found on the server</p>
\t \t \t <hr>
\t \t </div>
\t </div>
</body>würde ich bei der Festsetzung dieses Problem jede Hilfe dankbar.