我正在设计一个部分,我希望在可滚动内容旁边有一个固定的侧边栏。当我在任何非移动浏览器中看到它时,它工作得很好,但在Chrome的开发工具中使用移动分辨率时它不起作用。它开始滚动固定的div,但不是与另一个相同的pase。
我会给你留下代码:
HTML
<div class="scrollable_content">
<div class="fixed_sidebar">FIXED SIDEBAR</div>
<div class="fixed_topbar">FIXED TOPBAR</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sequi id unde sunt, corporis qui adipisci expedita facilis ipsa doloremque. Id fuga ad repellat, modi unde consectetur quasi rerum deserunt.</p>
</div>
</div>
CSS
html, body{
width: 100%
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.scrollable_content{
position: relative;
left: 320px;
width: 100%;
height: 100%;
padding: 50px 15px;
background-color: #555;
}
.fixed_sidebar{
position: fixed;
top: 0px;
left: 0px;
width: 320px;
height: 100%;
background-color: red;
}
.fixed_topbar{
position: fixed;
top: 0px;
left: 320px;
width: 100%;
height: 50px;
background-color: #222;
}
我的问题是,我做错了什么?固定定位在移动设备上不起作用?