Question

我有一个使用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>

Answer 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>

内容溢出超出Div View高度

1 个答案: