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 是绝对定位的。当你有一个绝对定位的元素在一个相对定位的元素内时，你的父元素将不会在它的 "flow" 中有绝对元素。因此，如果绝对元素变大，它就不会缩放。

如果你改变

#formContent {
    position: absolute;
}

收件人：

#formContent {
    position: relative;
}

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

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

祝你好运！

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

CSS: Responsive rectangle: Div got cut when resized

html

css

resize

responsive-design