正如您所见，内部页眉和内部页脚div沿着包含选择列表的are向下滚动。
如何将该区域向下滚动并将内部页眉/页脚固定到内容中？
我希望我的问题足够明确。谢谢
* {outline: 0; margin: 0; padding: 0; }
html, body, form { height: 100% !important; margin: 0; padding: 0;}
body {line-height: 1.6; padding-top: 50px; margin-bottom: 50px;}
footer {background-color: #212934;padding: 10px 0;width: 100%;position: fixed;height: 50px;bottom: 0px !important;}
.the-box {height: 100%; min-height: 600px;padding: 0px;background: #fff; margin: 0px 0 !important; margin-bottom: 50px !important; }
.inner-heder {background: #000;color: #fff;}
.inner-footer {background: #ccc;color: #fff } <!-- Latest Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Latest compiled and minified jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="inner-heder">
<div class="static-top">
Inner-heder content here
</div>
<div class="scroll-only-me">
<select id="testlist" size="60" style="width: 100%;">
<option value="0">Please select</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
<option value="4">Item #4</option>
<option value="5">Item #5</option>
<option value="6">Item #6</option>
<option value="7">Item #7</option>
<option value="8">Item #8</option>
<option value="9">Item #9</option>
<option value="10">Item #10</option>
<option value="11">Item #11</option>
<option value="12">Item #12</option>
<option value="13">Item #13</option>
<option value="14">Item #14</option>
<option value="15">Item #15</option>
<option value="16">Item #16</option>
<option value="17">Item #17</option>
<option value="18">Item #18</option>
<option value="19">Item #19</option>
<option value="20">Item #20</option>
<option value="21">Item #21</option>
<option value="22">Item #22</option>
<option value="23">Item #23</option>
<option value="24">Item #24</option>
<option value="25">Item #25</option>
<option value="26">Item #26</option>
<option value="27">Item #27</option>
<option value="28">Item #28</option>
<option value="29">Item #29</option>
<option value="30">Item #30</option>
<option value="31">Item #31</option>
<option value="32">Item #32</option>
<option value="33">Item #33</option>
<option value="34">Item #34</option>
<option value="35">Item #35</option>
<option value="36">Item #36</option>
<option value="37">Item #37</option>
<option value="38">Item #38</option>
<option value="39">Item #39</option>
<option value="40">Item #40</option>
<option value="41">Item #41</option>
<option value="42">Item #42</option>
<option value="43">Item #43</option>
<option value="44">Item #44</option>
<option value="45">Item #45</option>
<option value="46">Item #46</option>
<option value="47">Item #47</option>
<option value="48">Item #48</option>
<option value="49">Item #49</option>
<option value="50">Item #50</option>
<option value="51">Item #51</option>
<option value="52">Item #52</option>
<option value="53">Item #53</option>
<option value="54">Item #54</option>
<option value="55">Item #55</option>
<option value="56">Item #56</option>
<option value="57">Item #57</option>
<option value="58">Item #58</option>
<option value="59">Item #59</option>
<option value="60">Item #60</option>
</select>
</div>
<div class="inner-footer">
Inner-footer content here
</div> <!-- /.inner-footer -->
</div> <!-- /.the-box -->
</div> <!-- /.container -->
<footer class="hidden-xs" style="width: 100%;position: fixed;height: 50px;bottom:0px !important;">
<p>Footer text here</p>
</footer>
</form>
答案 0 :(得分：1)
您是否正在寻找具有可滚动内容的固定页眉和固定页脚，如此演示。
我已更新我的回答，请检查一次。
在这里演示：
body {
margin: 0;
border: 0;
padding: 0;
font-size: 15px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.inner_header {
position: absolute;
top: 50px;
left:0;
right:0;
color: #ffffff;
display: block;
font-size: 15px;
text-align: center;
padding: 10px 0;
background-color: #2bde73;
}
.inner_footer {
position: absolute;
bottom: 30px;
left:0;
right:0;
color: #ffffff;
display: block;
text-align: center;
padding: 10px;
margin: 0;
background-color: #2bde73;
}
.content {
position: fixed;
top: 90px;
left: 0;
bottom: 50px;
right: 0;
overflow: auto;
}
.select {
overflow: hidden;
width: 100%;
padding: 5px 0;
}
.footer {
position: absolute;
left:0;
right:0;
bottom: 0;
width: 100%;
background-color: #222;
border-color: #080808;
color: #fff;
height: 30px;
font-size: 12px;
padding: 5px 0;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About
</a>
</li>
<li>
<a href="#">Services
</a>
</li>
<li>
<a href="#">Contact
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="content">
<select id="testlist" class="select" size="60">
<option value="0">Please select
</option>
<option value="1">Item #1
</option>
<option value="2">Item #2
</option>
<option value="3">Item #3
</option>
<option value="4">Item #4
</option>
<option value="5">Item #5
</option>
<option value="6">Item #6
</option>
<option value="7">Item #7
</option>
<option value="8">Item #8
</option>
<option value="9">Item #9
</option>
<option value="10">Item #10
</option>
<option value="11">Item #11
</option>
<option value="12">Item #12
</option>
<option value="13">Item #13
</option>
<option value="14">Item #14
</option>
<option value="15">Item #15
</option>
<option value="16">Item #16
</option>
<option value="17">Item #17
</option>
<option value="18">Item #18
</option>
<option value="19">Item #19
</option>
<option value="20">Item #20
</option>
<option value="21">Item #21
</option>
<option value="22">Item #22
</option>
<option value="23">Item #23
</option>
<option value="24">Item #24
</option>
<option value="25">Item #25
</option>
<option value="26">Item #26
</option>
<option value="27">Item #27
</option>
<option value="28">Item #28
</option>
<option value="29">Item #29
</option>
<option value="30">Item #30
</option>
<option value="31">Item #31
</option>
<option value="32">Item #32
</option>
<option value="33">Item #33
</option>
<option value="34">Item #34
</option>
<option value="35">Item #35
</option>
<option value="36">Item #36
</option>
<option value="37">Item #37
</option>
<option value="38">Item #38
</option>
<option value="39">Item #39
</option>
<option value="40">Item #40
</option>
<option value="41">Item #41
</option>
<option value="42">Item #42
</option>
<option value="43">Item #43
</option>
<option value="44">Item #44
</option>
<option value="45">Item #45
</option>
<option value="46">Item #46
</option>
<option value="47">Item #47
</option>
<option value="48">Item #48
</option>
<option value="49">Item #49
</option>
<option value="50">Item #50
</option>
<option value="51">Item #51
</option>
<option value="52">Item #52
</option>
<option value="53">Item #53
</option>
<option value="54">Item #54
</option>
<option value="55">Item #55
</option>
<option value="56">Item #56
</option>
<option value="57">Item #57
</option>
<option value="58">Item #58
</option>
</select>
</div>
<div class="inner_header">Inner Header Section</div>
<div class="inner_footer">Inner Footer Section</div>
<div class="footer">Copyright © Test 2016</div>
答案 1 :(得分：1)
* {
outline: 0;
margin: 0;
padding: 0;
}
html,
body,
form {
height: 100% !important;
margin: 0;
padding: 0;
}
body {
line-height: 1.6;
padding-top: 0px;
margin-bottom: 0px;
overflow: hidden;
}
footer {
background-color: #212934;
width: 100%;
flex: 0;
min-height: 30px;
line-height: 30px;
color: #FFF;
text-align: center;
}
.the-box {
height: 100%;
min-height: 600px;
padding: 0px
background: #fff;
margin: 0px 0 !important;
margin-bottom: 50px !important;
}
#form1 {
display: flex;
flex-direction: column;
}
.navbar {
flex: 0;
min-height: 50px;
border-radius: 0 !important;
margin-bottom:0 !important;
}
.inner-heder {
background: #000;
color: #fff;
height: 100%;
display: flex;
flex-direction: column;
}
.inner-container {
flex: 1;
height: 100%;
overflow: hidden;
}
.static-top{
flex: 0;
min-height: 20px;
}
#testlist {
color: #000;
flex: 1;
}
.inner-footer {
background: #ccc;
color: #fff;
flex: 0;
min-height: 24px;
}<!-- Latest Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Latest compiled and minified jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container inner-container">
<div class="inner-heder">
<div class="static-top">
Inner-heder content here
</div>
<select id="testlist" size="60">
<option value="0">Please select</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
<option value="4">Item #4</option>
<option value="5">Item #5</option>
<option value="6">Item #6</option>
<option value="7">Item #7</option>
<option value="8">Item #8</option>
<option value="9">Item #9</option>
<option value="10">Item #10</option>
<option value="11">Item #11</option>
<option value="12">Item #12</option>
<option value="13">Item #13</option>
<option value="14">Item #14</option>
<option value="15">Item #15</option>
<option value="16">Item #16</option>
<option value="17">Item #17</option>
<option value="18">Item #18</option>
<option value="19">Item #19</option>
<option value="20">Item #20</option>
<option value="21">Item #21</option>
<option value="22">Item #22</option>
<option value="23">Item #23</option>
<option value="24">Item #24</option>
<option value="25">Item #25</option>
<option value="26">Item #26</option>
<option value="27">Item #27</option>
<option value="28">Item #28</option>
<option value="29">Item #29</option>
<option value="30">Item #30</option>
<option value="31">Item #31</option>
<option value="32">Item #32</option>
<option value="33">Item #33</option>
<option value="34">Item #34</option>
<option value="35">Item #35</option>
<option value="36">Item #36</option>
<option value="37">Item #37</option>
<option value="38">Item #38</option>
<option value="39">Item #39</option>
<option value="40">Item #40</option>
<option value="41">Item #41</option>
<option value="42">Item #42</option>
<option value="43">Item #43</option>
<option value="44">Item #44</option>
<option value="45">Item #45</option>
<option value="46">Item #46</option>
<option value="47">Item #47</option>
<option value="48">Item #48</option>
<option value="49">Item #49</option>
<option value="50">Item #50</option>
<option value="51">Item #51</option>
<option value="52">Item #52</option>
<option value="53">Item #53</option>
<option value="54">Item #54</option>
<option value="55">Item #55</option>
<option value="56">Item #56</option>
<option value="57">Item #57</option>
<option value="58">Item #58</option>
<option value="59">Item #59</option>
<option value="60">Item #60</option>
</select>
<div class="inner-footer">
Inner-footer content here
</div>
<!-- /.inner-footer -->
</div>
<!-- /.the-box -->
</div>
<!-- /.container -->
<footer class="hidden-xs">
Footer text here
</footer>
</form>