CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Axion
Axion

Reputation: 722

Content Spilling Overflowing Out of Div View Height

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>

Upvotes: 0

Views: 101

Answers (1)

Dasun Manathunga
Dasun Manathunga

Reputation: 318

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>

Upvotes: 2

Related Questions