首页 文章

容器DIV在调整大小时伸展，但在滚动时不伸展

提问于
浏览 次
0

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

.container1
          {
           width:80%;
           height: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);
           box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
           position:absolute;
           left:10%;
           border:1px;
           top:0px;
           border-style:solid;
           border-color:black;
           background-image: url(../img/albg.png) ;
           background-repeat:no-repeat;
           background-position:inherit;
           background-size:auto;
           z-index:-2;
           }
html css html5 responsive

2 回答

  • 1

    使用min-height而不是height JsFiddle

    min-height:100%;
/* height:100%; */
    回复于
  • 1

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

    如果您遇到父容器没有包装它的子容器的问题，可能是因为您是浮动元素，在这种情况下您可以使用overflow属性强制它换行 . 如果子元素绝对定位，则它们不再被视为DOM中正常流的一部分，并且您将无法让父母尊重它的高度 .

    CSS – why doesn’t percentage height work?

    回复于

相关问题