Question

我有3 div s：

#statements {
  position: relative;
  top: 0;
  bottom: 0;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  max-width: 340px;
  padding-left: 50px;
  padding-bottom: 50px;
  z-index: 1;
}  

#entries {
  position: relative;
  height: 60%;
  max-width: inherit;
  overflow: scroll;
}

#entryform {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 340px;
}

我需要它，以便位于entries内的entryform和statements具有以下定位：

entryform内的所有内容应始终位于statements
statements始终是浏览器窗口的高度
entries始终可滚动div，位于statements的顶部，占用60%空间。

我尝试使用上面的代码，但它确实无法正常工作。

<div id="statements">
  <div id="entries">entry</div>
  <div id="entryform">entryform</div>
</div>

Click here for JSFiddle

正如您在上面看到的，内容加载正常，但我必须向下滚动窗口并显示结果，以查看“entryform”。为什么？我如何解决这个问题，以便在窗口底部显示“entryform”而不必向下滚动？

更新一个解决方案可能是为position: fixed元素设置entryform，但我不能这样做，因为在我的设计中左边有一个菜单，当时用户打开它，statement div和里面的所有div应该向右移动。使用position: fixed时，这不会发生，即entryform保持不变。

Answer 1

根据我对你的描述的理解，这就是你想要的......

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}    
#statements {
      position: relative;
      top: 0;
      bottom: 0;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.4);
      max-width: 340px;
      padding-left: 50px;
      z-index: 1;
      background: red;
    }  

    #entries {
      position: relative;
      height: 60%;
      max-width: inherit;
      overflow: scroll;
      background: green;
    }

    #entryform {
      position: absolute;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      width: 340px;
      background: blue;
    }

＆＃13;

<div id="statements">
      <div id="entries">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer justo quam, venenatis et blandit et, varius id neque. Quisque laoreet justo justo, sed rhoncus nisl mollis sed. Nunc vitae interdum lacus. Aenean in justo orci. Vestibulum lobortis risus id tellus vehicula vestibulum. Praesent quis cursus ex, quis mollis diam. Nullam feugiat id sapien vel porta. Etiam elit diam, ultrices eu nisi sed, tempus varius erat. Duis aliquet mauris felis, id viverra est vulputate ut. Donec pharetra felis eu facilisis ornare. Aliquam ac justo vitae lacus tristique interdum non sollicitudin nunc. Maecenas tincidunt elit orci, et commodo est blandit a. Nunc lacinia, mauris et porttitor porttitor, libero tellus lobortis nunc, id cursus neque dui in tortor. In sed mi et augue pretium sollicitudin.
      </div>
      <div id="entryform">entryform</div>
    </div>

＆＃13;

JSFiddle version

在不向下滚动

1 个答案: