Container DIV stretches when resizing but not when scrolling
I have a main DIV which is centered on the screen and the height is the total size of the screen height. When I resize the browser it works fine, but if I have content below the visible browser window and need to scroll down, the DIV becomes static and assumes the size it had when it was scrolled. What needs to be changed here so that the container DIV resizes properly when scrolling?
.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;
}
使用最小高度而不是高度JsFiddle
min-height:100%;
/* height:100%; */
The issue here is that you're trying to use a percentage for height. Below is another SO article that explains in full detail why this doesn't work. Short answer if you use pixels or em's/rem's for height it will work, but not percentages.
If you're having an issue with the parent container not wrapping it's children, it's probably because you are floating elements in which case you can use the overflow property to force it to wrap. If the children elements are positioned absolutely then they are no longer considered part of the normal flow in the DOM and you will not be able to get the parent to respect it's height.
CSS – why doesn't percentage height work?
链接地址: http://www.djcxy.com/p/89470.html上一篇: 我怎样才能使用CSS创建一个箭头？