內容溢出超出Div View高度
[英]Content Spilling Overflowing Out of Div View Height
問題描述
我有一個使用height: 50vh;的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 個解決方案
解決方案1
2 2019-03-10 09:13:20
我希望這是您所期望的
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的固定高度時，如何創建新的div？
[英]How to create new div when the content is overflowing past the fixed height of the div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.