0
以下代碼是我計劃在我的網站上使用的自定義404頁面的一部分。然而，當我添加代碼行時存在主要問題overflow-y: auto;CSS屬性「overflow-y：auto」導致非常意外的結果
下面的代碼具有我期望的輸出。但是，當它內部的代碼達到超過75vh溢出不可見。
* {
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>爲了解決這個問題，我增加了行overflow-y: auto;在.extra類。這是造成問題的原因。當你運行下面的代碼時，一半的輸出是「缺失」。我不確定這是爲什麼發生。
* {
\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>我希望在解決這個問題的任何幫助。