内容溢出超出Div View高度
[英]Content Spilling Overflowing Out of Div View Height
问题描述
I have a div using height: 50vh; 
我有一个使用height: 50vh;的div height: 50vh; but no matter what I try I can't get the content inside of it to stop from overflowing. 但是无论我如何尝试，我都无法获取其中的内容来阻止溢出。 Inside of the div I have another div that uses a background image and maintains a specific aspect ratio... it also uses an overflow scroll. 在div内，我还有另一个div，它使用背景图像并保持特定的宽高比...它还使用了溢出滚动。
What I'm trying to do is have the content inside the top div resize on browser resize while maintaining the same aspect ratio. 我想做的是让顶部div内的内容在浏览器上调整大小，同时保持相同的宽高比。
Please let me know if this is possible and if so, how I can accomplish this. 请让我知道这是否可行，如果可以的话，我该如何完成。
Thanks! 谢谢！
Here is an example of what I have so far. 这是到目前为止我所拥有的一个例子。
Codepen: https://codepen.io/anon/pen/LaLqNZ 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>
1 个解决方案
解决方案1
2 2019-03-10 09:13:20
I Hope this is the one you expected 我希望这是您所期望的
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.