display into fixed html area - html

Question

In my html I get 'response' from controller. Number of lines in the response varies (max is 3).
What is the best way to 'reserve' 3 lines on my html page so the next div with 'SOMETHING' paragraph is not scrolled down by 'response' ?
<div class="row">
<p ng-bind-html="response"></p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>

Answer 1

Using CSS, fix the height occupied by your 3 rows and use overflow to scroll within that fixed height div.
CSS Overflow might help you.
.row-fixed-height {
height: 150px;
overflow: scroll;
}
and in HTML:
<div class="row-fixed-height">
<p ng-bind-html="response"></p></div>

Answer 2

Since the height of the lines varies based on font and font size, I would use line breaks to "reserve" the three lines. If you were to use for instance a fixed height on the div or p, it might jump around on a different browser that uses a different font.
Live Demo:
#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 Version: https://jsfiddle.net/rspyho74/

Answer 3

As oori pointed you, this is is about CSS, not Angular. The easiest way to fix the height to 3 lines is using the em unit:
.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>
As you can see, the paragraph keeps its height no matter how many lines there are. If you remove the height property you can see the difference.