位置固定內部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不滾動

回答

相關問題