Question

我遇到了css的一些问题，因为我自己学习，如果你可以帮助我，我需要一些解释。

我的css代码：

html,body {
    padding: 0;
    margin: 0;
    overflow-x:hidden;
    background: #fff;
    height:100%; 
}

#top {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 20px;
    padding: 10px;
    box-shadow:  0px 1px 1px 0px #585858;
    z-index: 10;
}

.menuR {
    float: right;
    margin-right: 20px;
    color: #585858;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
}

.content {
    position:relative;
    top: 40px;
    padding: 20px;
    background: #fff;
    width: 100%;
    height: 85%;
}

.header {
    margin: auto;
    padding: 10px;
    width: 650px;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background: #585858;
    color: #FFF;
}

.tableContent {
    margin: auto;
    width: 670px;
    min-height: 80%;
    overflow-y: scroll; 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background: #F2F2F2;
}

当我使用类.tableContent向div添加更多内容时，div正在增长而不是滚动。

Answer 1

请参阅此fiddle

这是我用来使其可滚动的CSS ..

.scroll{
    height:50px;
    width:100px;
    overflow-y:scroll;
    border:1px solid #000;
}

表示div滚动。我指定了一个高度。

并在fiddle

中使用min-height时看到差异

CSS overflow-y不滚动

1 个答案:

请参阅此fiddle