Переполнение содержимого, превышающее высоту просмотра Div - PullRequest
Новая
       14

Переполнение содержимого, превышающее высоту просмотра Div

0 голосов
/ 10 марта 2019

У меня есть div, использующий height: 50vh;, но независимо от того, что я пытаюсь сделать, я не могу получить содержимое внутри него, чтобы остановить переполнение. Внутри 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>

1 Ответ

2 голосов
/ 10 марта 2019

Надеюсь, именно этого вы и ожидали 

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