CSS - How to prevent the DIV without content from shrinking
I have the following code:
<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;
}
I found that if I remove the 'Hello World', the #sub-title-div will shrink and become invisible. Is there an easy method that I can do this more开发者_如何学编程 elegantly?
Thank you
If you don't need to support IE6, you can use the min-height property.
#sub-title-div {
min-height: 137px;
}
put when you want to remove text, then div will maintain its height
Use
min-width:901px;
min-height:137px;
if you want to have the DIV have the same dimensions even without content.
It could be your doctype? It doesn't dissapear for me. See the sample page:
<!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>
Use a pseudo-element. This is similar to @iTake's answer, adding an , but it keeps the extra space out of your layout and text selections.
<h1 class="no-shrink"></h1>
.no-shrink::after {
content: '\200B'; /* zero width space */
}
加载中,请稍侯......
精彩评论