三行可以滾動時溢出

我想在一行中建立三個div（每個33％的寬度）。一個div有一個內容應該滾動的孩子，如果它太大。不是身體！三行可以滾動時溢出

我做了一個草圖：

我與柔性盒試了一下，但隨後的整個身體就會滾動。有人能幫助我嗎？

2016-04-27 wernersbacher

你能請張貼，你試過嗎？ – Pugazh

http://stackoverflow.com/help/how-to-ask –

這似乎工作。在調整窗口大小時，元素也將調整大小，以便僅在沒有足夠空間顯示所有內容時才能滾動。

setWindowHeight(); 
 

 
function setWindowHeight() { 
 
    var windowHeight = window.innerHeight; 
 
    document.body.style.height = windowHeight + "px"; 
 
} 
 

 
window.addEventListener("resize", setWindowHeight, false);

.float { 
 
    float: left; 
 
    width: 33%; 
 
    height: 100%; 
 
} 
 
.left { 
 
    background: #f00; 
 
} 
 
.center { 
 
    background: #0f0; 
 
} 
 
.right { 
 
    background: #00f; 
 
} 
 
.scrollable { 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
}

<body> 
 
    <div class="float left"> 
 
    Left 
 
    </div> 
 
    <div class="float center"> 
 
    <div> 
 
     Center 
 
    </div> 
 
    <div class="scrollable"> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
    </div> 
 
    </div> 
 
    <div class="float right"> 
 
    Right 
 
    </div> 
 
</body>

來源

2016-04-27 14:02:18 DunningKrugerEffect

謝謝，看起來不錯。即使我無法得到它的工作。看看這個實例：http://wernersbacher.de/pro/goldenminer/ – wernersbacher

它看起來和我在例子中做的非常相似。你有什麼麻煩讓它工作？如果將該代碼轉儲到單個HTML文件中，則呈現效果良好。 – DunningKrugerEffect

我只是不確定它爲什麼不工作：身體捲動，而不是內部的div。 – wernersbacher

三行可以滾動時溢出

回答

相關問題