三行可以滚动时溢出

我想在一行中建立三个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

三行可以滚动时溢出

回答

相关问题