Question

我的nodejs / angularjs应用程序通过angular_controller和mongodb自动加载一堆div。

HTML：

<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
                <div class="individual_sunti">
                    <!--needs a unique div#id via angularz-->
                    <div class="sunti_content">{{sunti.content || 'content loading...'}}</div>
                    <div class="sunti_tags">{{sunti.tags || 'tags'}}</div>
                    <div class="sunti_author">{{sunti.author || 'author-placeholder'}}</div>
                    <div class="sunti_shortid">{{sunti.shortid}}</div>
                </div>
            </div>

我让他们共享同一个班级：

.individual_sunti {
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0.05em solid orange;
    width: 30em;
    left: 50%;
    margin-left: -15em;
    min-height: 3em;
    height: auto
    display: block;
    background-color: hsla(360, 100%, 100%, 0.95);
}

.sunti_contain {
    width: 100%;
    display: block;
}

.sunti_content {
    height: auto;
    overflow: auto;

}


.sunti_tags {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: hsla(100, 100%, 50%, 0.5);
}

.sunti_author {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: hsla(130, 100%, 50%, 0.5);
}

.sunti_shortid {
    position: absolute;
    display: block;
    bottom: 1em;
    right: 0;
}

和Angular使用模型绑定填充它们，当有人使用页面上的表单发布一个时：

$scope.submit_sunti = function() {
    socket.emit('post_new_sunti', {
        content: $scope.sunti.content,
        tags: $scope.sunti.tags,
        ancestor: $scope.sunti.ancestor
    })
    $scope.sunti.content = ""
    $scope.sunti.tags = ""
    $scope.sunti.ancestor = ""
}

基本上，无论如何，它们最终都具有相同的高度。有人建议使用flexbox，我对它的熟悉程度还不足以弄清楚它是如何工作的。 Angular使用行

填充HTML 带有可选ng-repeat="sunti in suntis"的

track by $index如果两个内容具有相同的确切内容（不太可能但可能）

.sunti_content

增长是因为它显然包含文本，但这是否意味着我需要独特的div id（比如我的html-comment-to-myslf-above）以确保每个生成的sunti div都是它自己的适当高度？

如何使用angular-filled-divs缩放以适合其内容？是否有可能仅通过CSS“修复它”？

由于

Answer 1

您将高度编码为

height: 12em

这意味着您的div不会自动调整大小，只会默认为该高度

由angular加载的重复div可以有不同的内容，我怎样才能让它们自动调整高度？

1 个答案: