显示到固定的HTML区域

Question

在我的html中，我从控制器得到'response'。响应中的行数变化(最大为3行)。在我的html页面上"保留"3行最好的方法是什么，这样下一个带有"SOMETHING"段落的div就不会被"response"向下滚动了?

<div class="row">
    <p ng-bind-html="response"></p>
</div>
<div class="row">
    <p>SOMETHING</p>
</div>

Answer 1

使用CSS，固定3行占用的高度，并使用overflow在固定高度的div内滚动。

CSS Overflow可能会帮助你。

.row-fixed-height { height: 150px; overflow: scroll; }

和在HTML中:

<div class="row-fixed-height">
  <p ng-bind-html="response"></p></div>

Answer 2

由于行高度根据字体和字体大小而变化，因此我会使用换行符来"保留"这三行。例如，如果你在div或p上使用固定的高度，它可能会在使用不同字体的不同浏览器上跳转。

现场演示:

#response {
    background: red;
}

<div class="row">
    <p id="response" ng-bind-html="response">
        <br />
        <br />
        <br />
    </p>
</div>
<div class="row">
    <p>SOMETHING</p>
</div>

JSFiddle版本:https://jsfiddle.net/rspyho74/

Answer 3

正如oori指出的那样，这是关于CSS的，而不是Angular。将高度固定为3行的最简单方法是使用em单位:

.row{
	margin: 10px;
	padding: 5px;
	border: 1px solid #000;
	border-radius: 5px;
}
p{
	float: left;
	margin: 0 5px;
	padding: 5px;
	border: 1px solid #000;
	height: 3em;
}

<div class="row">
    <p ng-bind-html="response"></p>
    <p ng-bind-html="response">Line 1</p>
    <p ng-bind-html="response">Line 1<br>Line 2</p>
    <p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
    <div style='clear: both;'></div>
</div>
<div class="row">
    <p>SOMETHING</p>
    <div style='clear: both;'></div>	
</div>

正如你所看到的，无论段落有多少行，它的高度都保持不变。如果你删除height属性，你可以看到不同的