我一直在处理一个我一直在做的小项目的问题。我有一个页眉,页脚和中间内容。我希望中间内容具有滚动功能,但我无法设置确定的高度。有没有办法绕过滚动工作所需的高度?
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
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 {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
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 {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: auto;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
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 {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
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 {
height: 36px;
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 {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
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>
&#13;
答案 0 :(得分:1)
将overflow
属性设置为scroll
将显示滚动条(尽管已禁用)。
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
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 {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
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 {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: scroll;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
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 {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
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 {
height: 36px;
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 {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
&#13;
<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>
&#13;
滚动条的屏幕截图: