zoukankan      html  css  js  c++  java
  • 子元素高度不确定,父元素高度随子元素变化,当子元素高度过高时滚动,相对定位的其他子元素的不会发生滚动

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

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

    <!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>
    

      

  • 相关阅读:
    项目功能规格说明书
    团队工作准则&贡献分配规则
    Scrum Meeting Alpha
    用户需求与NABCD分析
    团队项目选题-博客园移动客户端
    团队作业Week3
    爱情小故事
    高手遇事的处理方法,学会你也是高手
    富人思维--目标导向
    有一种失败叫瞎忙
  • 原文地址:https://www.cnblogs.com/cuipingzhao/p/14385577.html
Copyright © 2011-2022 走看看