Question

所以我现在正试图让div的高度保持与宽度的比例，当变小/变大时，下面的图像更好地显示我想在每个图像的底部做什么。而不是像图像2那样溢出的高度，我希望它像图像1我不知道如何在这里做到这一点到目前为止。

HTML

<div class="browser-wrapper">
  <div class="browser">
    <div class="browser-header">
    </div>
    <div class="screen">
      <img src="assets/img/pieces/leakyroof.png" alt="">
    </div>
 </div>
</div>

CSS

.browser-wrapper {
  display: flex;
  padding: 1em;
  align-items: center;
  justify-content: center; }

.browser {
  background-image: url("../../assets/img/broswer-outline.svg");
  background-repeat: no-repeat;
  background-position: 100% 0%;
  width: 76%;
  height: 40em; }

.screen {
 width: 98.8%;
 max-height: 75.5%;
 border-bottom-right-radius: 5px;
 overflow-y: scroll;
 margin: auto; }

.screen img {
  width: 100%; }

.browser-header {
  width: 100%;
  min-height: 5.7vw; }

Answer 1

这取决于你想要使用什么技术，如果只有css那么我想你可以通过@media规则以各种方式设置你的页面

例如：

@media screen and (min-height: 480px) {
    /*enter code here*/
}

您可以将媒体设置为可靠的设备。这里显示了更多的exmaples， http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

顺便说一句。

尝试使用BootstrapCSS，它应该对您很方便，但您最终可能会重新制作布局。

解决方案2＃Javascript

document.getElementById('someDiv').clientHeight;
document.getElementById('someDiv').offsetHeight;

解决方案3＃jQuery

$('#someDiv').height();

Answer 2

$(window).load(function(e) {
var heights = $("div.mySrvc ul li").map(function ()
{
    return $(this).height();
}).get(),

maxHeight = Math.max.apply(null, heights);

$("div.mySrvc ul li").css('height',maxHeight);

}）;

希望这有帮助。这将获得最大高度的div并将其应用于所有其他响应和相同的长度。

如何使可滚动框的高度具有反复性

2 个答案: