0
我正在使用flex，因此兩個內部div高度保持不變。但是我面臨的問題是，設計沒有響應。在全寬窗口中它看起來很完美，但是當我們在移動設備中查看它時，它會嘗試擠壓內容。如何製作柔性響應
如何解決這個問題？
是否有任何其他方式可以讓兩個div並排放置高度相同？ （該數據是動態的，所以我不能設置一個高度屬性任何股利（或多個））
我的小提琴鏈接：link
.image-bg-fluid-height {
background-color: black;
padding: 51px 0 0 0;
}
.image-bg-fluid-height,
.image-bg-fixed-height {
/*text-align: center;*/
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.gradient-background {
background: #00BCD4;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
/* Standard syntax (must be last) */
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
.icon.default-bg {
background-color: white;
color: #ffffff;
}
.default-bg {
background-color: #09afdf;
color: #ffffff;
}
.icon {
display: inline-block;
text-align: center;
position: relative;
background-color: rgba(255, 255, 255, 0.85);
color: #000;
font-size: 24px;
width: 150px;
height: 150px;
line-height: 58px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 40px;
border: 1px solid transparent;
}
.default-bg {
background-color: #09afdf;
color: #ffffff;
}
.feature-box {
margin-bottom: 50px;
margin-top: 50px;
}
.tech-button {
color: white !important;
background-color: #00ACC1;
border-color: #00ACC1;
}
.tech-button:hover {
color: black !important;
background-color: white;
}
.tech-button:active {
color: black !important;
background-color: white;
}
.tech-button:target {
color: black !important;
background-color: white;
}
.tech-button:focus {
color: black !important;
background-color: white;
}
.table > thead > tr > th {
border-bottom: none !important;
}
.table > tbody > tr > td {
border-top: none !important;
}
.box-title {
background-color: #00BCD4;
padding: 15px;
color: white;
}
.web-icon {
display: inline-block;
text-align: center;
position: relative;
background-color: white;
color: #000;
font-size: 24px;
width: 150px;
height: 150px;
line-height: 15px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
/*-webkit-border-radius: 5px;*/
/*-moz-border-radius: 5px;*/
/*border-radius: 40px;*/
border: 1px solid transparent;
}
.signup-button:hover {
background-color: white;
color: #00BCD4;
}
.text-color {
color: white;
}
.tld-span {
padding: 10px 30px 10px 10px;
background-color: #0097A7;
color: white;
-webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}
.tld-span > a {
color: white;
}
.tld-span > a:hover {
text-decoration: none;
}
.manual-label {
margin-top: 45px;
font-weight: normal;
font-size: 10px;
color: #BDBDBD;
}
.export-button {
color: white !important;
background-color: #00ACC1 !important;
border-color: #00ACC1 !important;
}
.export-button:hover {
color: black !important;
background-color: white !important;
}
.export-button:active {
color: black !important;
background-color: white !important;
}
.export-button:target {
color: black !important;
background-color: white !important;
}
.export-button:focus {
color: black !important;
background-color: white !important;
}
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.ui-autocomplete {
position: absolute;
cursor: default;
z-index: 30 !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="image-bg-fluid-height" style="display: flex;">
<div class="col-md-8 gradient-background">
<div class="col-md-12">
<div class="col-md-3 feature-box">
<span class="icon default-bg"><img src="/logos/favicon.png" width="100px" height="100px" style="margin-top: 25px;"></span>
</div>
<div class="col-md-9 col-xs-6 col-sm-3 feature-box text-color">
<h6>TECHNOLOGY</h6>
<h3>Tech</h3>
<p>Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream .</p>
</div>
</div>
<div class="row pull-right">
<span class="tld-span pull-right">
<a data-toggle="modal" data-target="#export-modal" style="cursor: pointer;"><i class="fa fa-share-square-o"></i> Export</a>
</span>
</div>
</div>
<div class="col-md-4" style="background-color: #FAFAFA;">
<div class="col-md-12" style="flex: 1;">
<div class="col-md-12 feature-box text-center">
<p>Count</p>
<hr style="border-top: dotted 1px #BDBDBD;">
<p>Top websites</p>
<a href="#top-websites" class="btn btn-default tech-button">VIEW WEBSITES</a>
</div>
</div>
</div>
</header>注：頂部黑色部分是我的標題的填充。
謝謝。