Responsive design 侧边栏内容从页面移出
我有一个固定的侧边栏,但当屏幕高度降低时,内容会流出屏幕,我不知道如何修复它,侧边栏中的图像也会扩展以显示更多内容。侧边栏需要修复,但我也需要显示此内容 “废话废话”是屏幕高度较小时看不见的部分 这里是我的网站的JS小提琴Responsive design 侧边栏内容从页面移出,responsive-design,positioning,fixed,sidebar,Responsive Design,Positioning,Fixed,Sidebar,我有一个固定的侧边栏,但当屏幕高度降低时,内容会流出屏幕,我不知道如何修复它,侧边栏中的图像也会扩展以显示更多内容。侧边栏需要修复,但我也需要显示此内容 “废话废话”是屏幕高度较小时看不见的部分 这里是我的网站的JS小提琴 <!--SIDE BAR--> <div class="sideBar"> <div id="logo"> <img src="images/logo-shot.png" /> </
<!--SIDE BAR-->
<div class="sideBar">
<div id="logo">
<img src="images/logo-shot.png" />
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="newsletter">
<h1>NEWSLETTER</h1>
<div id='content'>
<div id="hidden-content">
<span class="signup">Sign Up Today</span> <input class="side-mail" type="text" name="FirstName" placeholder="Enter your email here"><br>
<input type="submit" value="SUBMIT" class="submit-button">
</div>
</div>
<div id='button'><sctrong><img src="images/more-banner.png" /></strong></div>
<script>
$("#button").click(function(){
$("#content").stop().slideToggle();
return false;
});
$("#button").hover(function(){
$(this).stop().css({"cursor" : "pointer"})
});
</script>
</div>
<div id="barFoot">
<p>© 2013 McAllisters</br>
Paxton House,</br>
No 11 Woodside Crescent,</br>
Glasgow,</br>
G3 7UL</p>
</br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br>
</div>
</div>
我很难理解和/或复制这个问题(使用Firefox 37.0.1)。当屏幕调整大小时,红色菜单边栏的内容会从页面上消失,我需要以某种方式显示所有内容
.sideBar {
position:fixed;
top:0;
left:0;
background:#e95259;
width:200px;
height:100%;
z-index:999;
margin-left: auto;
margin-right: auto;
left: 0;
right:850px; /* Must nclude width of sidebar */
border-right: solid 10px #fff;
border-left: solid 10px #fff;
}