位置固定内部div不滚动

我有这个html和css。问题是我想滚动内部div但固定位置不应该被删除。位置固定内部div不滚动

body { 
 
       position: fixed; 
 
      } 
 
      div { 
 
       overflow-y: scroll; 
 
       height:100%; 
 
      }

<body> 
 
     <div> 
 
     Sohail Hussain 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 

 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
     ABCDEFGHI 
 
     </div> 
 
    </body>

来源

2016-05-25 sohail.hussain.dyn

这样https://jsfiddle.net/LeoLion/k2212qaz/ –

对于%高空作业的父元素需要的高度。在你的情况下，<html>和<body>没有高度。

，它不是改变<body>定位一个很好的做法。更好地将您的内容包装在<div>中，然后调整它的位置。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    position: fixed; 
 
} 
 
div { 
 
    overflow-y: scroll; 
 
    height: 100%; 
 
}

<div> 
 
    Sohail Hussain 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 

 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>ABCDEFGHI 
 
</div>

来源

2016-05-25 09:25:22

感谢它为我工作。还有一个问题，如果我想在div上添加一些弹性效果，我正在添加-webkit-overflow-scrolling：touch;有时候滚动会陷入困境。它的任何决议？ –

@ sohail.hussain.dyn对此，您可能会问一个新问题（在发帖前尝试研究） –

您需要在div使用height: 100vh为窗口的高度，或者您需要在身体适用height: 100%到

body {position: fixed;} 
 
div { 
 
    overflow-y: scroll; 
 
    height:100vh; 
 
}

<body> 
 
    <div> 
 
    Sohail Hussain 
 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 

 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    ABCDEFGHI 
 
    </div> 
 
</body>

来源

2016-05-25 09:26:54

百分比高度在div还需要进行调整为你的父母div编辑高度100％。简单地使用：

body{ 
position: fixed; 
height: 100%; 
}

这里的例子：

body { 
 
    position: fixed; 
 
    height: 100%; 
 
} 
 
div { 
 
    overflow-y: scroll; 
 
    height:100%; 
 
}

<div> 
 
     Sohail Hussain 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 

 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
     ABCDEFGHI 
 
     </div>

来源

2016-05-25 09:31:27

位置固定内部div不滚动

回答

相关问题