Question

我有这个HTML和CSS。问题是我想滚动内部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>

Answer 1

要使%高度起作用，父元素需要一个高度。在您的情况下，<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>

Answer 2

您需要在height: 100vh上使用div获取窗口高度，或者需要在身体上应用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>

Answer 3

div中的百分比高度也需要调整为父母div的高度100％。简单地使用：

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

以下是例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

位置固定内部div不滚动

3 个答案: