3

我有一个主<div>屏幕以屏幕为中心，高度是视口高度的总大小。当我调整浏览器的大小时它工作正常，但如果我在可见浏览器窗口下方有内容并且需要向下滚动，则<div>变为静态并假定它滚动时的大小。此处需要更改什么以便容器<div>在滚动时正确调整大小？

    .container1
          {
           宽度：80%；
           高度：100%；
          -webkit-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
          -moz-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
           盒子阴影：0px -1px 18px 1px rgba(0,0,0,0.75);
           位置：绝对；
           左：10%；
           边框：1px；
           顶部：0px；
           边框样式：实心；
           边框颜色：黑色；
           背景图像： url(../img/albg.png) ;
           背景重复：不重复；
           背景位置：继承；
           背景尺寸：自动；
           z-索引：-2；
           }
4

2 回答 2

2

使用最小高度而不是高度 JsFiddle

min-height:100%;
/* height:100%; */
于 2016-01-13T15:36:21.033 回答
1

这里的问题是您正在尝试使用百分比来表示高度。下面是另一篇 SO 文章，详细解释了为什么这不起作用。如果您使用像素或 em's/rem's 作为高度，它会起作用，但不是百分比。

如果您遇到父容器未包装其子容器的问题，这可能是因为您是浮动元素，在这种情况下，您可以使用溢出属性强制其包装。如果子元素是绝对定位的，那么它们不再被视为 DOM 中正常流程的一部分，您将无法让父元素尊重它的高度。

CSS – 为什么百分比高度不起作用？

于 2018-04-16T15:20:52.663 回答