Content Spilling Overflowing Out of Div View Height
Question
I have a div using 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.
What I'm trying to do is have the content inside the top div resize on browser resize while maintaining the same aspect ratio.
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
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 answers
solution1
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.