制作一行高度的空div

Question

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

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

仅使用CSS的一行高度

，还是需要将 作为内容？

Answer 1

一些可能性：

• 将height（或min-height）设置为line-height的used value。

  line-height的初始值为normal，其使用值取决于实现，但spec表示1.0和1.2之间的数字< / p>

  在我的情况下（带有font-family: "times new roman"的winXP的FF27），该值为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>

  或者，您可以使用zero-width space（​）

  div { border: 1px solid red; }

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

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

  作为@BoltClock says，可以使用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

我遇到的问题是jQuery Terminal，它需要具有与正常行大小相同的空行。其他解决方案是有问题的，因为当使用固定的行高时，行与行之间存在间隙，我报告了bug in Firefox的关于字体大小+行高的布局。

到目前为止，最好的解决方案是：

div::before {
    content: '\0200B';
    float: left;
    display: block;
}

，并且在代码中没有line-height / min-height，并且效果很好。另外，当不使用行高时，它的样式选择也不错，没有间隙。

Answer 6

你想保持多高？这与你的字体大小有关吗？那可以是em，pt，px或％。

这只是1.5em是任意值的例子：

<div style="width: 100%; height: 5px" ></div>

如果你在这个div中没有​​要写的东西，请使用一些高度值。