在其中製作響應性的css文本框

Question

我有三個css文本框。但是，css文本框的高度是固定的： height：800px;

但不是每個css文本框都有相同的文本。所以一個CSS文本框沒有太多的文本。但是，你會看到很多空白。

所以我的問題是：

如何使一個響應的CSS框？

謝謝

這是CSS：

.box h5{ 
    text-align:center; 
    position:relative; 
    top:10px; 
} 
.box { 
    width:100%; 
    height:10px; 
    background:#FFF; 
    margin:40px auto; 
} 

/*================================================== 
* Effect 3 
* ===============================================*/ 
.effect3 
{ 
    position: relative; 
} 
.effect3:before 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    box-shadow: 0 15px 10px #777; 
    transform: rotate(-3deg); 
} 



.box h5{ 
    text-align:left; 
    margin:10px; 
    position:relative; 
    top:10px; 
} 
.box { 
    width:100%; 
    height:800px; 
    background:#FFF; 
    margin:40px auto; 
} 

/*================================================== 
* Effect 6 
* ===============================================*/ 
.effect6 
{ 
    position:relative;  
     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.effect6:before, .effect6:after 
{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:50%; 
    bottom:0; 
    left:10px; 
    right:10px; 
    border-radius:100px/10px; 
} 

我嘗試將其與汽車，但後來我在CSS盒

Answer 1

我的底部得到文本的一點點重疊像這樣解決：

.box h5 { 
    text-align: left; 
    margin: 10px; 
    position: relative; 
    top: 10px; 
    padding-bottom: 15px; 
}