CSS：响应式矩形：Div在调整大小时被剪切掉了

Question

我正在尝试制作一个响应式矩形，它位于页面中间，内部有一些内容。

但是，当我重新调整大小时，div #result会被删除，前提是我已声明min-height: 350px;和max-height: 650px;。 理想情况下，我希望min-height: 350px;并在页面调整大小时max-height: 650px;。我也试过height: 30%;，但它没有给我任何运气......

所以，如果有人能告诉我为什么div被删除了，那将是非常好的:)）））

这是调整大小之前的样子： 调整大小（请注意图的头部）： 当它处于媒体屏幕模式时（一切正常！）：

代码在这里：

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
a, img, input{ outline: none; border:none; color: #000; }

/*
*, *:before, *:after {
     box-sizing: border-box; }
*/

.input-underline-wrapper {
    display: inline-block;
    width: 70%;
}

.underline {
    background-color: black;
    z-index: 0;
    height: 1px;
    margin-top: 1px;
    width: 100%;
}

#formWrapper{
	float: right;
	margin-top: 30px;
	width: 360px;
	}	


#formWrapper{
	float: left;
	margin-top: 20px;
	width: 100%;
	height: 100%;
	max-height: 600px;
}

#form{
	margin-inline-start: 15%;
	position: absolute;
	width: 50%;
	min-width: 400px;
	max-width: 600px;
/* 	height: 30%; */
	min-height: 350px;
	max-height: 600px;
	overflow: hidden;
	border: 1px solid black;
	background-color: white;
}

#form:before{
	content: "";
	display: block;
	padding-top: 0;
}

#formContent{
	padding: 2%;
	position: absolute;
	width: 96%;
	height: 96%;
}

#fillInForm{
	float: left;
	width: inherit;
	margin-top: 10px;
}

.user{
	float: left;
	padding: 0 0.4em 0 0.4em}

#OK{
	padding: 0;
	border: none;
	background: none;
}


#result{
	width: inherit;
	height: 120px;
}

#resultText{
	float: left;
	margin-top: 100px;	
	width: 50%;
	min-width: 200px;
	max-width: 300px;
	
}

#resultFigure{
	float: right;
	width: 50%;
	margin-top: 30px;
	min-width: 200px;
	max-width: 300px;
}

#userFigure{

	margin-right: 50%;
	position: inherit;

}

#button{
	position: absolute;
	bottom: 5%;
	left: 37%;
	padding: 0;
	border: none;
	background: none;
}

/* Media Queries */
@media screen and (max-width: 628px) {
				
	.underline {
	    background-color: black;
	    z-index: 0;
	    height: 1px;
	    margin-top: 1px;
	    width: 100%;
	}
				
	#form{
		vertical-align: middle;
		height: 500px;
		}	
		#form #formContent #result{
			width: inherit;
			height: 120px;
			}	
			#form #formContent #result #resultText{
			float: left;
			margin-top: 100px;	
			width: 50%;
			max-width: 150px;
			}
	
			#form #formContent #result #resultFigure{
			margin-top: -100px;
			float: right;
			width: 50%;
			max-width: 150px;
			}
		
}

			<div id = "formWrapper">			
				<div id = "form">
					<div id = "formContent">
						<a> Hello</a>			
						<div id = "fillInForm">
							<div class = "user">
								<img src = "http://placebear.com/30/100" />
								<br>
								<span class="input-underline-wrapper">
									<input type = "text" placeholder = "enter a name" id = "homme" />
									<div class="underline"> </div> 				
								</span>
									<button type ="button" id = "OK">OK</button>
							</div>
							<div class = "user">						
								<img src = "http://placebear.com/30/100" />
								<br>
								<span class="input-underline-wrapper"> 
								<input type = "text" placeholder = "enter a name" id = "femme" />
								<div class="underline"> </div> 					
							</span>
							<button type ="button" id = "OK">OK</button>

							</div>
							<div class = "user">							
								<img src = "http://placebear.com/30/100" />
								<br>
								<span class="input-underline-wrapper"> 
									<input type = "text" placeholder = "enter a name" id = "enfant" />
									<div class="underline"> </div> 				
							</span>
							<button type ="button" id = "OK">OK</button>

							</div>
						</div>
						<div id = "result">
							<div id = "resultText">
								<div id = "takeALookInsideWith">
									<a> Go To: </a>
								</div>
								<div id = "userName">
									userName Test
								</div>	
							</div>
							<div id = "resultFigure">
								<div id = "userFigure">
									<img src = "http://placebear.com/30/100" />
								</div>
							</div>
						</div>
						<button type ="button" id = "button">ENTER</button>
					</div>
				</div>
			</div>

Answer 1

你的问题非常简单：）

你的元素：#formContent定位于绝对位置。如果元素位于相对于父元素定位的元素内，则不会在其“流”中包含绝对元素。因此，如果绝对元素变大，它就不会扩展。

如果你改变了

#formContent {
    position: absolute;
}

要：

#formContent {
    position: relative;
}

您将看到父级使用#formContent元素开始缩放。

我希望这对你有所帮助。我建议您快速查看http://www.w3schools.com/css/css_positioning.asp以获得更详尽的解释。

祝你好运！