CSS - 如何在没有内容收缩的情况下防止DIV

时间:2010-09-05 21:30:37

标签: css

我有以下代码:

  <div id="sub-title-div">
  Hello world
  </div>

  #sub-title-div {
    background: #FFE640;
    position: relative;
    top: 0px;
    left: 30px;
    width: 901px;
    height: 137px;
    line-height: 13px;
  }

我发现如果删除'Hello World',#sub-title-div将缩小并变为不可见。有一种简单的方法可以让我更优雅吗?

谢谢

5 个答案:

答案 0 :(得分:3)

如果您不需要支持IE6,则可以使用min-height属性。

#sub-title-div {
    min-height: 137px;
}

答案 1 :(得分:3)

使用

min-width:901px;
min-height:137px;

如果你想让DIV具有相同的尺寸,即使没有内容。

答案 2 :(得分:1)

这可能是你的doctype?它并没有消失。请参阅示例页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
      #sub-title-div {
        background: #FFE640;
        position: relative;
        top: 0px;
        left: 30px;
        width: 901px;
        height: 137px;
        line-height: 13px;
      } 
    </style>
</head>
<body>
    <div id="sub-title-div">
    </div>
</body>
</html>

答案 3 :(得分:1)

当你想删除文本时,

&nbsp;,然后div将保持其高度

答案 4 :(得分:1)

使用伪元素。这类似于@iTake 的答案,添加了一个 &nbsp;,但它可以将额外的空间保留在您的布局和文本选择之外。

<h1 class="no-shrink"></h1>
.no-shrink::after {
  content: '\200B'; /* zero width space */
}