Question

我有一个固定的包装器（用于覆盖背景）和一个内部div（用于保存text / div）。在内部div中，我有一些div和文本。

＆＃13;

html,
body {
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F60;
  z-index: 2;
}
.inner {
  background-color: rgba(29, 29, 29, 0.95);
  color: #fff;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

＆＃13;

<div class="wrapper">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.</div>
</div>

＆＃13;

我的问题是：当屏幕高度比文字高度短时，用户无法看到所有文字。如何保持背景固定并使文本div可移动，以便用户可以查看inner div中的所有内容（例如text，divs）？基本上我希望用户能够阅读完整的内部div（滚动），同时将背景包装固定在背景上。

Answer 1

我建议给内部元素max-height 100%，然后添加overflow: auto以有条件地添加滚动条。

Updated Example

.inner {
    /* ... */
    max-height: 100%;
    overflow: auto;
}

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F60;
  z-index: 2;
}
.inner {
  background-color: rgba(29, 29, 29, 0.95);
  color: #fff;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  overflow: auto;
}

<div class="wrapper">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a finibus nisl. Nulla id lacinia lorem. Suspendisse tristique nisi non pulvinar sollicitudin. Cras magna ligula, molestie at fringilla at, finibus semper tortor. Curabitur vulputate ante sapien, et ultrices libero iaculis tristique. Fusce pharetra malesuada fringilla. Vivamus sodales, eros vel tincidunt facilisis, purus nulla fermentum tortor, sed viverra dui nulla ac leo. In sit amet sem tempor, iaculis odio a, gravida eros. Proin auctor scelerisque porttitor. Etiam tincidunt nunc eu tristique facilisis. Suspendisse ut arcu vel nunc dictum varius. Pellentesque sit amet efficitur turpis.</div>
</div>

Answer 2

我不知道我的问题是否正确，但这里有一些关于CSS的更改：

.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F60;
    z-index: 2;
    position: relative;
}
.ABC {
    background-color: rgba(29, 29, 29, 0.95);
    color: #FFF;
    top: calc(50% - 50px);
    height: 20px;
    position: relative;
    width: 100%;
    overflow-y: scroll;
    min-height: 100px;
}

在具有固定父级背景的同时查看完整的子div

2 个答案: