制作一行高度的空div

Question

是否可以创建一个将生成以下HTML的规则:

<div style="width: 100%"></div>

只使用CSS的一行高度,还是我需要把它 作为内容？

Answer 1

一些可能性:

• 集height(或min-height)到line-height的使用值.

  line-heightis 的初始值normal,其使用值取决于实现,但规范建议在1.0和之间的数字1.2

  在我的情况下(FFX for winXP with font-family: "times new roman")值是1.25,所以你可以使用height: 1.25em.但是,该值可能与其他字体或实现不同.

  然后,最好手动设置line-height为某个值,例如line-height: 1.25em.

  div {
    border: 1px solid red;
    min-height: 1.25em;
    line-height: 1.25;
  }

  <div></div>

  请注意,如果要仅在没有内容时将这些样式设置为元素,则可以使用:empty伪类:

  div:empty {
    border: 1px solid red;
    height: 1.25em;
    line-height: 1.25;
  }

  <div></div>

• 将一些内容插入元素.

  例如,您可以添加常规空间并设置white-space为pre-wrap(或pre)以防止空间折叠:

  div {
    border: 1px solid red;
    white-space: pre-wrap;
  }

  <div> </div>

  或者,您可以使用零宽度空间(​)

  div { border: 1px solid red; }

  <div>?</div><!-- There is a zero-width space inside -->

  如你所说, 也会奏效.但是,它是一个不间断的空间,因此其目的是防止自动换行.然后,使用它将在语义上不正确的IMO.

  正如@BoltClock 所说,那些空格可以插入CSS伪元素,但请注意,这可能不适用于非常旧的浏览器.

Answer 2

这取决于您对单行高度的定义,因为没有CSS单位对应于元素的计算行高.

如果您知道line-height此元素的确切值,则可以显式设置height为相同的值.但是,考虑到你的问题,情况可能并非如此.

有一个与字体大小相对应的单位,em如果一行的高度等于计算的字体大小,则可以使用该单位:

<div style="width: 100%; height: 1em"></div>

否则你将不得不加入某种填料内容.你可以投入 并完成它:

<div style="width: 100%">&nbsp;</div>

或者通过使用伪元素编写CSS规则来进行一些矫枉过正,但您必须能够以某种方式定位此元素:

div::before { content: '\00a0'; }

如果元素可能有或没有内容,但您希望它具有最小高度,

• 使用min-height你原本应该使用的地方height,或

• 选择div:empty::before代替,如果你选择使用伪元素,因此填料不会被插入,如果有内容.

Answer 3

另一个解决方案:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Answer 4

解决方案visibility: hidden;很聪明.将内容设置为Unicode字符feff(字节顺序标记)更简单.这没有宽度但有高度; 它在每个浏览器上的行为都一样,一直到IE6.

.your-selector:empty::before {
    content: '\feff';
}

我发现WebKit(至少在Mac OS上)对于某些字体应用与粗体文本略有不同(1px)的行高度.为了实现一致性(在这种情况下,我们甚至需要应用于非空选择器):

.your-selector::before {
    content: '\feff';
    font-weight: 900;
}

Answer 5

许多年后，出现了新的 css 单元：lh和rlh。

div {
    min-height: 1lh;
}

但缺乏支持(caniuse#lh)。目前 Chrome、Edge 和 Opera 支持它。Firefox 和 Safari 不支持。