0

私はこのレイアウトを持っています:

<div id="container">
<div id="sidebar">
    <div id="logo"></div>
    <div id="box"></div>
</div>
<div id="content">
    <div id="gallery">
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
    </div>
</div>
</div>

CSS は次のとおりです。

#container {
    background-color: black;
    display:block;
    position:absolute;
    height:auto;
    width:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    overflow:hidden;
    background-size:auto 100%;
    margin:50px;
}
#sidebar {
    background-color: purple;
    min-width: 250px;
    width:250px;
    max-width: 20%;
    height:100%;
    overflow:hidden;
    float:left;
}
#logo {
    height: 100px;
    background-color: orange;
}
#box {
    bottom: 20px;
    font-family: sans-serif;
    font-size: 10px;
    color: grey;
    margin: 20px;
    padding: 10px;
    background-color: white;
    overflow-y: scroll;
    text-align: justify;
}
#content {
    display:inline;
    width:75%;
    margin-left: 300px;
    padding: 0px;
    margin:0px;
    text-align: center;
    background-color: green;
    overflow-y: scroll;
}
#gallery {
    margin-left: auto;
    margin-right: auto;
    display: table;
    background-color: blue;
}
.thumb {
    width: 200px;
    height: 150px;
    display: inline-block;
    background-color: black;
    margin: 20px;
    border: 7px solid white;
    overflow:hidden;
    background-color: yellow;
}

#boxandのコンテンツ#galleryまたは or#contentを垂直方向にスクロール可能にする必要があります。

私のレイアウトが責任を負い、 #container のオーバーフローが隠されているため、これらの機能に何らかの問題があるに違いないと思います。

ここでは、問題を説明するためにjsFiddleを作成しました。

4

1 に答える 1

0

これを CSS #box に追加できます

max-height : 100px ; /*for example*/

編集 ：

あなたが使用することができます

overflow: auto;

スクロールしたいDIVで

于 2013-05-17T03:49:42.110 に答える