将滚动条添加到没有设置高度的div

时间:2016-03-31 23:15:44

标签: html css

我一直在处理一个我一直在做的小项目的问题。我有一个页眉,页脚和中间内容。我希望中间内容具有滚动功能,但我无法设置确定的高度。有没有办法绕过滚动工作所需的高度?



#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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

overflow属性设置为scroll将显示滚动条(尽管已禁用)。

&#13;
&#13;
#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;
&#13;
&#13;

滚动条的屏幕截图:

Screenshot showing scrollbars in Chrome