オーバーフロー時にスクロールできる3つのdivsが並んでいます

3つのdivを1行（各33％幅）で作成したいと考えています。 1つのdivには子供がいて、大きすぎると内容がスクロールする必要があります。体ではない！オーバーフロー時にスクロールできる3つのdivsが並んでいます

私はスケッチ行わ：私は、フレックスボックスでそれを試してみましたが、その後、体全体がスクロールする

を。誰かが私を助けることができますか？

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

オーバーフロー時にスクロールできる3つのdivsが並んでいます

答えて

関連する問題