0
私が取り組んでいる小さなプロジェクトで問題が発生しています。私はヘッダーとフッターと中間コンテンツを持っています。中間のコンテンツにスクロール機能を持たせたいのですが、確定的な高さを設定することはできません。スクロールが動作するために必要な高さを回避する方法はありますか？ scrollへoverflowプロパティを設定設定された高さを持たないdivにスクロールバーを追加する
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
\t \t
#header {
\t font-size: 50px;
\t font-weight: bold;
\t text-align: center;
\t padding-top: 25px;
}
#form {
text-align: center;
}
#Bar {
height: 35px;
width: 400px;
font-size: 15px;
box-sizing: border-box;
border-style: solid;
vertical-align: top;
border-width: 1px;
border-color: #c7c7cd;
}
#Bar:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea:active {
\t outline: none;
\t border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
\t outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea {
background-color: #4199F0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 35px;
color: #ffffff;
font-weight: bold;
font-family: Arial;
border-style: solid;
border-width: 1px;
font-size: 15px;
text-decoration: none;
border-color: #3A89D8;
box-sizing: border-box;
vertical-align: top;
}
body {
margin: 0 auto;
font-family: Arial;
}
#hid {
\t visibility: hidden;
}
#NoteHolder {
\t padding-left: 125px;
\t padding-right: 125px;
\t overflow: auto;
}
#BarHold {
\t padding-top: 10px;
}
#SearchOP {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
#NavSave {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
#popupBoxOnePosition {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
.popupBoxWrapper {
\t width: 550px;
\t margin: 50px auto;
\t text-align: left;
}
.popupBoxContent {
\t background-color: #FFF;
\t padding: 15px;
\t overflow: hidden;
}
#popup-Sub {
\t -moz-border-radius: 0px;
\t -webkit-border-radius: 0px;
\t border-radius: 0px;
\t height: 45px;
\t background-color: #3232ff;
\t border-style: solid;
\t border-width: 1px;
\t font-family: Arial;
\t font-size: 15px;
\t float: right;
\t color: #FFFFFF;
\t border-color: #1919ff;
\t text-align: center;
\t width: 80px;
\t font-weight: bold;
}
.HeaderNote {
\t color: #7E7E7E;
\t font-family: Arial;
\t font-size: 12px;
}
#Col {
\t font-weight: bold;
}
table {
\t border: 1px solid #e0e0e0;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #e0e0e0;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: left;
}
th {
\t background-color: #e6e6e6;
}
#Oper {
\t float: right;
\t padding-right: 15px;
\t cursor: default;
}
a:hover {
\t text-decoration: underline;
\t font-weight: bold;
}
#NoteAv {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
#Settings {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
#FirstVisit {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 120%;
\t background-color: rgba(0,0,0,0.5);
\t display: none;
}
#MarkList {
\t vertical-align: middle;
\t position: fixed;
display: inline;
left: 0;
bottom: 0;
height: 56px;
width: 100%;
border-top-style: solid;
border-width: 1px;
border-color: #3A89D8;
background-color: #eff5f9;
overflow-x: hidden;
}
#MarkList > button {
\t height: 36px;
\t color: #39739d;
font-size: 18px;
text-align: center;
white-space: nowrap;
background: #E1ECF4;
border: 1px solid;
display: inline;
margin: 10px 10px 10px;
border-radius: 1px;
border-style: solid;
border-color: #39739d;
}
.YelColBox {
\t background-color: #F0F041;
}
.LastCol {
\t background-color: #F0F041;
}
.GreColBox {
\t background-color: #62ff62;
}
.BluColBox {
\t background-color: #4199F0;
}
.PurColBox {
\t background-color: #9941F0;
}
.RedColBox {
\t background-color: #F04141;
}
.OraColBox {
\t background-color: #F09941;
}
.ColorBox {
\t float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}<body onload="FirstVisit('Settings');">
<div style="height: 30%;">
<div>
<a id="Oper" onClick="toggle_visibility('NoteAv');">Notes</a><a id="Oper" onClick="toggle_visibility('Settings');">Settings</a>
<p id="header">Note Searcher</p>
</div>
<hr>
<p id="form">
<input onClick="this.setSelectionRange(0, this.value.length)" class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Removed JS for the fiddle.">
<input class="SearchInp" type="submit" id="sea" onClick="SetOff()" value="Search">
<br>
<input id="Highlight" type="radio" name="textOp" checked>Highlight
<input id="Filter" type="radio" name="textOp">Filter
</p>
</div>
<div id="NoteHolder">
<p class="NoteOp">
Imagine if this filled up the whole text area.
</p>
</div>
<div id=Hid>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="note.js"></script>
<footer id="MarkList">
</footer>
</body>
：ほぼすべての要素にscroll'は、スクロールバーが追加されますが、彼らは、コンテナ以来、無効になりますその内容を保持するためにサイズが増加する可能性が最も高い。 –
どのように有効にしますか？ミドル・ディグをオーバーフロー・スクロールに設定しました。 – Hawkeye
コードを表示していないので、あまり言いようがありません。 –