Html 空的div（样式：高度）不会显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18994830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Empty div (with style: height) will not display
提问by azochz
Incrediblysimple piece of HTML - but not displaying how I would expect.
令人难以置信的简单 HTML 片段 - 但没有显示出我的预期。
I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"
我正在尝试创建一个空的 div，在页面顶部显示为空白，用 style="height: 400px;"
Even though I have specified a height, my empty div will not display. What am I missing here?
即使我指定了高度，我的空 div 也不会显示。我在这里缺少什么？
UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic stylerules needed to display an empty div?
更新：我的主要问题是：为什么即使设置了高度，空的 div 也不显示？或者，style显示空 div 所需的基本规则是什么？
Full code:
完整代码：
<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div>
<div style="width: 50%; margin: auto;"></div>
</body>
</html>
采纳答案by mdesdev
回答by Dmitri Larionov
The css style you are looking for is min-height: 20px;By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.
您正在寻找的 css 样式是min-height: 20px;默认情况下，没有内容的 div 的高度为 0，因为自动设置是默认设置，其自身大小以适应内容。
回答by Shaun
You need to add a background so you can see the white box.
您需要添加背景，以便您可以看到白框。
background-color:black;
You won't be able to see it.
你将无法看到它。
回答by broc.seib
The reason it did not display is because you had position:absolutein your style. That means that divwill be positioned independently of the other elements, and have no effect on the divthat follows. So your second divis essentially the first divon the screen.
它没有显示的原因是因为你有position:absolute你的风格。这意味着div将独立于其他元素定位，并且对后面的元素没有影响div。所以你的第二个div本质div上是屏幕上的第一个。
回答by Bosnian Coder
Add some whitespace to your div and it will work.
向您的 div 添加一些空格，它将起作用。
<div style="height:400px; width:100%"> </div>
回答by Aft3rL1f3
So I threw your code into my editor and added a black background like below...
所以我把你的代码扔进了我的编辑器，并添加了一个黑色背景，如下所示......
<div style="height:400px;
width:100%;
margin:0;
padding:0;
position:absolute;
background-color: #000;">
</div>
and it showed up fine for me. I am not sure what you were expecting to see, but you can get some seemingly weird results with 'position: absolute'.
它对我来说很好。我不确定您希望看到什么，但是您可以使用“位置：绝对”获得一些看似奇怪的结果。
- Absolute means that the element is positioned relative to its first positioned ancestor element.
- For general use 'position: relative', more often than not, will return desired results. Relative basically means that the element is positioned relative to its normal position, so you can move it via left:20px or right: 20px; It's likley to go where you want it to better. The other thing to consider is the div elements display property. I noticed you did not set it, and you are having trouble with the way the div is displaying. Usually a div element is set to 'display: block;', though not always. I always make sure to define the display property with div elements because I have found that if you don't an object will simply not display at all when you attempt to render it in the browser, or it could display in an undesirable way.
- 绝对意味着该元素相对于其第一个定位的祖先元素定位。
- 对于一般使用“位置：相对”，通常会返回所需的结果。相对基本上意味着元素相对于其正常位置定位，因此您可以通过 left:20px 或 right:20px 移动它；很可能去你希望它做得更好的地方。另一件要考虑的事情是 div 元素的显示属性。我注意到您没有设置它，并且您在 div 的显示方式上遇到了问题。通常将 div 元素设置为 'display: block;'，但并非总是如此。我总是确保使用 div 元素定义 display 属性，因为我发现如果您不尝试在浏览器中呈现对象，则它根本不会显示，或者它可能以不受欢迎的方式显示。
回答by Ali Sheikhpour
For who looking for a white space (not exactly an empty div) you can add an empty spanso the div is no more considered as empty one.
对于寻找空白（不完全是空 div）的人，您可以添加一个空跨度，这样 div 就不再被视为空的。
Avoid using because the default font-sizecan make the div higher than you want.
避免使用， 因为默认值font-size会使 div 高于您想要的值。
div{
height:200px;
background:#ff8800;
}<div><span></span></div>