单击一个菜单按钮时,我有一个可以滑入和滑出的菜单,但是当我点击它时,侧边栏比预期长,并引入了滚动。
可以看到here。单击菜单按钮后,您可以滚动。我希望侧边栏只与页面一样长,而不是更改页面的长度。
我的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 100px;
width: 100%;
text-align: center;
line-height: 2;
color: white;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
padding-top: 10px;
}
.sidebar li {
color: black;
list-style-type: none;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
margin-top: 30px;
padding-top: 10px;
}
.content {
padding:10px;
padding-bottom:30px;
padding-top: 50px;
padding-left: 250px;
}
#menu-btn {
background-image: url(http://i.imgur.com/cT9D02u.png?1);
float: left;
height: 48px;
width: 44px;
margin-left: 50px;
margin-top: -35px;
}
.footer {
width:100%;
height:30px;
position:absolute;
text-align: center;
bottom:0;
left:0;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div id="menu-btn"></div>
</div>
<div class="sidebar">
<li><a href="#">Hello</a></li>
<li><a href="#">This</a></li>
<li><a href="#">Is</a></li>
<li><a href="#">Just</a></li>
<li><a href="#">A</a></li>
<li><a href="#">Test</a></li>
</div>
<div class="content">
<p>Hello, World</p>
</div>
<div class="footer">
<p>Hello</p>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$("#menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
</script>
</body>
</html>
我正在使用jquery 2.1.3。
谢谢, erip
答案 0 :(得分:1)
.sidebar {
...
/* height: 100%; */
top: 100px;
bottom: 0;
}
<强> Demo 强>
答案 1 :(得分:1)
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
//height: 100%;
top: 100px;
bottom: 0;
padding-top: 10px;
}