0
Ich habe ein Problem mit einem kleinen Projekt, an dem ich gearbeitet habe. Ich habe eine Kopf- und Fußzeile und mittleren Inhalt. Ich möchte, dass der mittlere Inhalt eine Bildlauffunktion hat, aber ich kann keine definitive Höhe festlegen. Gibt es eine Möglichkeit, um die erforderliche Höhe zu erreichen, damit Scroll funktioniert?Hinzufügen von Bildlaufleisten zu einem Div, das keine festgelegte Höhe hat
#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>
Einstellung 'Überlauf: scroll' auf fast jedem Element wird Scrollbalken hinzufügen, aber sie werden seit dem Behälter deaktiviert werden wird wahrscheinlich in der Größe zunehmen, um seinen Inhalt zu halten. –
Wie aktivieren Sie sie? Ich stellte die mittlere Grabung auf Überlauf Scroll. – Hawkeye
Nun, ich kann nicht wirklich viel sagen, da Sie keinen Code gezeigt haben ... –