我想将div(我的侧边栏)拉伸到页面底部.我知道我需要添加"身高:100%;" 为了做到这一点.
但是当我添加高度:100%;时,内容比侧边栏少的页面会削减侧边栏的高度,然后您无法看到侧边栏内容.
这是索引页面.一切都看起来就像我想要的那样.
这是一个示例页面.请注意侧边栏已被剪切.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)
提前致谢!
*@Ritabrata Gautam*
改变后的CSS修复了我的第二个问题,但现在我回到了较短页面上的侧边栏:见:http://www.tarawilder.com/staging/?page_id = 19
我现在要离开家了,今晚能够回复.再次感谢你的帮助!
我对Javascript知之甚少,但过去几天我一直在学习很多东西.
在我的生活中,我不能想出这个.
我在Bootstrap中使用模态函数,我已经完成了它的工作和一切.但现在,一旦用户关闭对话框,我想要发生一些事情(插入CSS).
我知道如何插入CSS.单击数据关闭时如何启动它?
谢谢.
编辑:我这样做了吗?它似乎不起作用.
<script>
$(document).ready(function(){
$('.testing').click(function(event){
$('.modal-body').empty();
if($(event.target).is('#step2')) {
$('.modal-body').append('<img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive" id="step100">');
} else if ($(event.target).is('#step3')) {
$('.modal-body').append('<img src="//placehold.it/600x350" class="thumbnail img-responsive" id="step100">');
} else { }
$('#modal').modal('show');
$('#modal').on('hide.bs.modal', function (e) {
$("#wheel").css("-webkit-animation-play-state","running");
$(".fa").css("-webkit-animation-play-state","running");
})
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
模态代码:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button …Run Code Online (Sandbox Code Playgroud)