Question

我是一个angularJS应用程序，包含以下HTML代码段：

<div class="rightNavBarQuiz">

    <div ng-show="showNoteList">

        <div id="noteBar" data-ng-click="viewNote(note); notePreview=!notePreview" ng-repeat="note in notesList" ng-swipe-left="checked = true">
            <div id="noteListScreenshot"></div>
            <div id="noteListTitle">{{note.moduleName}}: {{note.videoName}}</div>
            <div id="noteListStats">Duration: {{note.videoDuration}} Seconds</div>
            <div id="noteText" ng-show="notePreview">{{noteText}}</div>
            <div id="ViewButton"></div>

        <div id="deleteNoteButton" ng-show="checked" ng-swipe-right="checked = false" data-ng-click="deleteNote(note.noteId)">Delete?</div>

        </div>

    </div>

</div>

基本上，当单击父div“noteBar”时，'noteText'div中的文本会增加并扩展div。我有一个问题，'noteBar'扩展'noteText'div。结束：auto似乎使父div'noteBar'可滚动而不是扩展它的高度。

下面是'notetext'的CSS及其容器'rightNavBarQuiz'，'showNoteList'和'noteBar'：

.rightNavBarQuiz{
border-style:solid;
    height: 99%;
    width: 71%;
    float: right;
    position:relative;
    overflow: scroll;
}

#noteBar{
    width:100%;
    height: auto;
    position:relative;
    overflow: auto;
    border-top:1px dotted grey;
    border-bottom:1px dotted grey;
    margin-top:4px;
}

#noteText{
    color: grey;
    position: absolute;
    height:auto;
    width:170px;
    margin-top: 80px;
    margin-left: 113px;
    float:left;
    white-space: pre-wrap;
    word-wrap:break-word;
    overflow:auto;
}

Answer 1

使用

#noteText{
    ...
    overflow:visible;
}

（而不是overflow: auto）

Div元素滚动而不是扩展溢出：auto

1 个答案: