子元素高度不确定,父元素高度随子元素变化,当子元素高度过高时滚动,相对定位的其他子元素的不会发生滚动

发送数据请求上传图片时,因图片的大小不确定,父元素的高无法写固定值。图片容器设置最大高度,当图片滚动时相对父元素定位的其他元素位置不随图片滚动而滚动。

代码如下,欢迎交流指正:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container {
				position: relative;
				height: 400px;
				 450px;
				border: black 1px solid;
				overflow: auto;
				z-index: 4;
			}
			.pic-container {
				position: relative;
				height: auto;
				 450px;
				max-height: 400px;
				overflow: auto;
				z-index: 9;
				display: none;
			}
			
			.logo {
				position: absolute;
				top: 20px;
				right: 20px;
				 40px;
				height: 40px;
				border: solid 1px red;
				z-index: 12;
			}
			.pic {
				height: auto;
				 100%;
			}
			.pic img {
				 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 相对定位的元素 -->
			<div class="logo">
			</div>
			<!-- 溢出滑动的元素 -->
			<div class="pic-container">
				<div class="pic">
					<img src="logo.png" >
				</div>
			</div>
		</div>
		<script src="./jquery2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".container").click(function (){
				$(".pic-container").css({display:'block'})
				$(".container").css({'height':"auto",'max-height':"400px"})
			})
		</script>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/cuipingzhao/p/14385577.html