我想在Header＆amp ;;之间滚动期间创建固定边栏。页脚，右侧内容为可移动here is my demo one
答案 0 :(得分：1)
试试这个。您必须处理padding的{{1}}，因为body padding-top height header padding-left width sidebar body{
padding:60px 0 0 150px;
}
.header {
background: GREEN;
color: #fff;
position:fixed;
width:100%;
top:0;
left:0;
height:60px;
z-index:100;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
width: 250px;
height: 51px;
}
.navbar {
margin-bottom: 0px !important;
}
.navbar-nav>li>a {
color: #fff !important;
padding-bottom: 12px;
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
/* background-color:#3385ff !important; */
color:#d83b01 !important;
cursor:pointer;
}
.icon-bar {
background-color: white;
}
#wrap {
min-height: 100%;
height: auto;
padding: 0 0 60px;
}
.footer {
background: green;
color: #fff;
height:70px;
position: fixed;
width:100%;
padding-bottom: 100% auto;
bottom:0;
left:0;
}
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
.sidebar{
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
min-height: 600px;
position:fixed;
top:60px;
left:0;
width:130px;
/* background-color: #f5f5f5; */
background: #fafafa none repeat scroll 0 0;
padding:10px 5px;
border:1px solid #DDDDDD;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<!-- Navigation -->
<nav class="navbar header" 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="#/home">
MYDEMO
</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 navbar-right">
<li >
<a id="login-button"
role="button" data-toggle="modal" data-target="#login-modal" data-backdrop="static" data-controls-modal="login-modal" > <i class="fa fa-sign-in"></i> </a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div class="row" style="margin-top:10px">
<div class="col-md-offset-3 col-md-6" >
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Buscar" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div><br>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="sidebar">
<section>
<div class="filter-field">
<legend>filters</legend>
<div class="checkbox" >
<label><input type="checkbox" class="filter" value="">Option 1</label><br>
<label><input type="checkbox" class="filter" value="">Option 2</label><br>
<label><input type="checkbox" class="filter" value="">Option 3</label><br>
<label><input type="checkbox" class="filter" value="">Option 4</label><br>
<label><input type="checkbox" class="filter" value="">Option 5</label><br>
<label><input type="checkbox" class="filter" value="">Option 6</label><br>
<label><input type="checkbox" class="filter" value="">Option 7</label><br>
<label><input type="checkbox" class="filter" value="">Option 8</label><br>
<label><input type="checkbox" class="filter" value="">Option 9</label><br>
<label><input type="checkbox" class="filter" value="">Option 10</label><br>
<label><input type="checkbox" class="filter" value="">Option 11</label><br>
<label><input type="checkbox" class="filter" value="">Option 12</label><br>
</div>
</div>
</section>
</div>
</div>
<div class="col-md-9">
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
<p>this is moveable content</p>
</div>
</div>
</div>
</div><!--wrap-->
<div class="footer"></div> parse_line defferred.defer Log.i("myMessage", "Hello Guys"); //display console output using log cat.
TextView myText = (TextView) findById(R.id.text_id);
myText.setText("Hello Guys");
}}必须超过public void sendMessage(View view){
if( view instanceof TextView){
TextView myText = (TextView) view;
myText.setText("Hello Guys");
}
}
的{{1}}。这样你的内容就不会与这两者重叠。
{{1}}
{{1}}