Question

我有一个包含在父div中的表。我看到的问题是，当表包含的数据大于父表时，它将扩展到父表之后。

这是一个小提琴，基本上所有东西都需要包含在蓝框中。（更多信息如下） http://jsfiddle.net/CjX2v/7/

table {
    background-color: red;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height:100%;
}
table > tbody > tr:first-child {
    background-color: green;
    height: 20px;
}
div {
    background-color: blue;
    width:500px;  /* This value is not known, supplied by user */
    height: 500px;  /* This value is not known, supplied by user */
    display: inline-block;
}

溢出：隐藏将无效，因为表中包含的文本需要可见。

我认为这是一个相当简单的问题，但如果您需要更多信息，请告诉我。

Answer 1

好的，我认为这是你正在尝试做的事情。

Click here for the example: JS FIddle

为了让子项在父项中可滚动，您必须设置固定元素的溢出。

  overflow: auto;

在我的示例中，<div class="main">是父元素和固定元素，因此css看起来像这样。

 .main {
    background: black;
    width: 250px;
    height: 250px;
    padding: 40px;
    overflow: auto;
}

.child1 {
    width: 400px;
    height: 400px;
    background: red;
    padding: 20px;
}

p {
    float: right;
}

.child2 {
    width: 300px;
    height: 300px;
    background: green;
    padding: 40px;
    margin: 0 auto;
    margin-top:20px;
}

防止表扩展到父级以外

1 个答案: