Question

我有这个布局：

<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;
}

我需要#box以及#gallery或#content的内容可以垂直滚动。

因为我的布局是负责的并且#container的溢出被隐藏了，所以我认为这些功能肯定存在一些问题。

我在这里创建了一个jsFIddle来说明问题。

Answer 1

您可以在CSS #box

中添加

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

编辑：

您可以使用

overflow: auto;

在DIV中你要滚动

溢出在响应式布局中滚动

1 个答案: