CSS - 移动定位:奇怪的行为。

时间:2017-02-12 12:48:13

标签: html css mobile css-position responsive

我正在设计一个部分,我希望在可滚动内容旁边有一个固定的侧边栏。当我在任何非移动浏览器中看到它时,它工作得很好,但在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;
      }

我的问题是,我做错了什么?固定定位在移动设备上不起作用?

0 个答案:

没有答案