Question

我有一个带溢出的容器：滚动。内容高于容器高度，因此滚动。

问题是当容器位于拆分较宽容器div的固定高度的div旁边时，如何自动调整容器的高度。

我的代码如下：

   <div  ng-repeat="t in p.tabs" 
        class="tabContent" 
        ng-class="currentTab==t.name?'selected':''"
        >
        <div>
            <h2>{{t.displayName}}</h2>
        </div>
        <div class="vScrollable">
            <ul>
                <li ng-repeat="l in t.description">
                    {{l}}
                </li>
            </ul>
        </div>
    </div>

CSS：

.popover .tabContent {
    border-top: dotted 1px gray;
    display: none;
    height: 50px;
    background-color: red;
}

.vScrollable {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: lightblue;
}

Answer 1

赞this？

我已经有了另一个，并提出了这个。它使用CSS flexbox，是我能做的最好的。

一些新的CSS（我还对添加包装器的HTML做了一些改动）：

.popover .tabContent > .wrapper {
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  height: 100%;
}
.popover .tabContent > .wrapper div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  margin : 4px;
}
.popover .tabContent > .wrapper .vScrollable {
  -moz-box-flex: 2;
  -webkit-box-flex: 2;
  -ms-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

编辑：小提琴的新答案

如何调整滚动容器高度以使可滚动内容完美调整

1 个答案: