内容溢出溢出 div 视图高度答案

【问题标题】：Content Spilling Overflowing Out of Div View Height内容溢出溢出 div 视图高度
【发布时间】：2019-03-10 06:32:34
【问题描述】：

我有一个使用 height: 50vh; 的 div，但无论我尝试什么，我都无法让其中的内容停止溢出。在 div 内部，我有另一个 div，它使用背景图像并保持特定的纵横比……它还使用溢出滚动。

我想要做的是让顶部 div 中的内容在浏览器调整大小时调整大小，同时保持相同的纵横比。

请告诉我这是否可行，如果可行，我该如何实现。

谢谢！

这是我目前所拥有的一个例子。

Codepen：https://codepen.io/anon/pen/LaLqNZ

    body,
    html {
      padding: 0;
      margin: 0;
    }
    
    #wrap {
      width: 100vw;
      height: 100vh;
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    
    #top {
      width: 100vw;
      height: 50vh;
      display: inline-block;
      background: blue;
      padding: 20px;
      box-sizing: border-box;
    }
    
    #bottom {
      width: 100vw;
      height: 50vh;
      display: inline-block;  
      background: green;  
    }
    
    .one {
      max-width: 450px;
      margin: auto;
    }
    
    .two {
      padding-top: 73%;
      display: block;
      margin: 0;
      background-image: url(https://i.imgur.com/OQL0NR3.png);
      background-size: cover;
      -moz-background-size: cover;
      background-position: center;
      position: relative;
    }
    
    .three {
      position: absolute;
      top: 5.3%;
      right: 4%;
      bottom: 23.5%;
      left: 4%;
    }
    
    .four {
      max-height: 100%;
      overflow: scroll;
    }
    
    .four img {
      max-width: 100%;
      display: block;
    }

 <div id="wrap">
    	<div id="top">
    		<div class="one">
    			<div class="two">
    	    		<div class="three">
    	      			<div class="four"><img src="https://i.imgur.com/4yBw2n4.jpg"></div>
    	    		</div>
    	  		</div>
    	  	</div>
    	</div>
    	<div id="bottom">
    		<h1>Sample Text</h1>
    	</div>
    </div>

【问题讨论】：

我在此处提供的源代码或codepen 链接中看不到max-height: 50vh; 的任何用法。
@NewToJS 对不起，我的意思是说高度：50vh;.
当你说 “我要做的是让顶部 div 内的内容在浏览器调整大小时调整大小，同时保持相同的纵横比。” 你的意思是电脑显示器应该用它调整大小吗？
@NewToJS 是的，我想调整显示器的大小。调整浏览器宽度时显示器正确显示...但调整浏览器高度时显示器无法正确显示。我希望我解释得没错。

标签： javascript jquery html css responsive-design

【解决方案1】：

我希望这是你所期望的

document.addEventListener('DOMContentLoaded', function(){
setTimeout(function() { 
    resize();
}, 25);

});
    
function resize() {
var w = document.getElementById('monitor').width;
document.getElementById('two').setAttribute("style", "width: " + w + "px;")
}

body,
html {
padding: 0;
margin: 0;
}

#wrap {
width: 100vw;
height: 100vh;
display: inline-block;
margin: 0;
padding: 0;
}

#top {
width: 100vw;
height: 50vh;
display: inline-block;
background: blue;
padding: 20px;
box-sizing: border-box;
}

#bottom {
width: 100vw;
height: 50vh;
display: inline-block;
background: green;
}

.one {
max-width: 450px;
height: 100%;
margin: auto;
}

.two {
display: block;
margin: auto;
height: 100%;
position: relative;
}

.three {
position: absolute;
top: 5.3%;
right: 4%;
bottom: 23.5%;
left: 4%;
}

.four {
max-height: 100%;
overflow: scroll;
}

.four img {
max-width: 100%;
display: block;
}

.monitor {
    position: absolute;
    height: 100%;
}

::-webkit-scrollbar { 
    width: 0 !important 
}

<!DOCTYPE html>
<html>
<body onresize="resize()">
<div id="wrap">
    <div id="top">
        <div class="one">
            <div id="two" class="two">
                <img id="monitor" class="monitor" src="https://i.imgur.com/OQL0NR3.png">
                <div class="three">
                    <div class="four"><img src="https://i.imgur.com/4yBw2n4.jpg"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
        <h1>Sample Text</h1>
    </div>
</div>

    </body>

</html>

【讨论】：

感谢您的解决方案。这解决了调整浏览器高度时的问题......但是现在当浏览器宽度调整大小时，监视器不会缩放（就像以前一样）。我想我会采用另一种方法，但感谢您对此的帮助！
格莱德我可以帮你。 :-) 我将显示器高度设置为 100%，因为要保持图像纵横比。如果不是监视器图像会拉伸。我将更新答案，并让您知道是否可以找到解决方案。抱歉回复晚了。