css - How to display text background color beyond text?

Question

I have run into a problem, where background of a text field does not cover the whole element, but only extends as far as the text does. An example.

I'd like the background color to extend throughout the element. Like this:

Edit. I am interested in a CSS solution, which works with all screen sizes. Just writing height: n px would not work.

Answer 1

刚刚更改display:table为display:block在课堂上middlearea- 现在它似乎可以按照您的意愿工作。

编辑：当然display，完全删除属性会导致相同的结果。

Answer 2

我不知道我是否完全理解你的问题，但也许你可以min-height为你的容器设置一个属性，这样无论文本有多短，它都会显示一个最小高度。

Answer 3

见下文，当我改变height:时，背景也会改变：

div.text {
position: relative;
background-color: #DFDFDF;
opacity: 0.8;
padding-top: 8px;
padding-right: 52px;
padding-bottom: 8px;
padding-left: 12px;
font-family: arial;
text-align: justify;
font-size: 0.9em;
height: 150px; <--- work with this 656px seems perfect.
background-size: 100%;
}