我开发了一个网站。响应能力在桌面视图中运行良好，但在不同的分辨率下工作不正常。
这是我的代码：
<div class="container">
<section id="ServicesSection">
<div>
<br />
<br />
<br />
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div style="background-color: #3487C2; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="text-align: center; vertical-align: top; color: #ffffff; text-transform: uppercase; font-size: 36px; font-weight: 500; padding: 10px 0px 10px 0px;">
<span class="services">Our Services</span>
</div>
<div class="container-fluid" style="padding-top: 5px;">
<div class="row" style="margin-bottom: 100px;">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="HealthSummary.aspx" class="ServiceClick" id="HealthSummary">
<div style="background-color: #ffffff ;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Wellness score or Health summary</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="HistoricalRecords.aspx" class="ServiceClick" id="HistoricalRecords">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Historical records storing</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="visible-sm clearfix"></div>
<div class="col-sm-1"></div>
</div>
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="ExpertOpinon.aspx" class="ServiceClick" id="ExpertOpinon">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Sharing the data or expert opinion
<br />
(Doctors, Family members, etc..)</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="EmergencyContact.aspx" class="ServiceClick" id="EmergencyContact">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Emergency contact info</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="Security.aspx" class="ServiceClick" id="Security">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Security</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="Recommendations.aspx" class="ServiceClick" id="Recommendations">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Recommendations</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
</div>
<div class="col-sm-1"></div>
</div>
</section>
</div>
这是myplunker https://plnkr.co/edit/1WNj7bl5fqCYu30UKYlf?p=preview
我无法在不同的分辨率下获得具有相同高度的所有盒子。 我的要求是在所有浏览器中以不同的分辨率获得所有相同高度的盒子。
答案 0 :(得分：0)
你需要这个高度相同的div。 可以通过添加
来实现max-height: ##px;
overflow:auto;
div将具有相同的高度，并根据内容滚动显示。
您可以使用媒体查询调整高度。