我有以下代码:
<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将缩小并变为不可见。有一种简单的方法可以让我更优雅吗?
谢谢
答案 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)
放
,然后div将保持其高度
答案 4 :(得分:1)
使用伪元素。这类似于@iTake 的答案,添加了一个
,但它可以将额外的空间保留在您的布局和文本选择之外。
<h1 class="no-shrink"></h1>
.no-shrink::after {
content: '\200B'; /* zero width space */
}