Question

我有一个包含内容的div，但它仍然有height:0px;，在示例中您可以看到＆＃34; index-slideshow＆＃34;有height:0px;我需要＆＃34;职位：绝对;＆＃34;因为jQuery幻灯片显示的照片必须一个在另一个之上。

这个div有内容，但没有任何高度。问题是什么？

JSFIDDLE DEMO

＆＃13;

#index-slideshow {
  margin: 0px;
  position: relative;
  width: 100%;
  padding: 0px;
  max-width: 100%;
  box-sizing: border-box;
  z-index: -1;
}
#index-slideshow > img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  max-width: 100%;
  margin: auto;
  box-sizing: border-box;
}
.wrap {
  margin: 0 auto;
  width: 950px;
  max-width: 93%;
  border: 0px;
  padding: 0px 10px 10px 10px;
  background-color: blue;
  color: white;
}

＆＃13;

<div id="index-slideshow">
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/g/400/200">
</div>
<div class="wrap">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit magna ...

  </p>
</div>

＆＃13;

Answer 1

这是因为<div>内的两个图片都有position: absolute;。绝对定位的元素不会占用空间。

请在此处查看此示例：

＆＃13;

.border {border: 1px solid #999; margin-bottom: 100px;}
.abs {position: absolute; height: 50px; width: 50px; background-color: #ccc;}

＆＃13;

<div class="border">
  <div class="abs">I am absolute!</div>
</div>
<div class="border">
  Hi
  <div class="abs">I am absolute!</div>
</div>

＆＃13;

使用CSS计算绝对定位元素的高度是不可能的，因为它们不在布局中。

将图片的position设为static或提供min-height。

Answer 2

你的图像div在你的包裹div上。

尝试以下方法之一：

卸下：

position: relative;

JSFiddle是here

或者
删除：

z-index: -1;

JSFiddle是here。

Answer 3

将position: absolute;更改为position: relative。Like this.

#index-slideshow > img {
position: relative;
top: 0px;
left: 0px;
width:100%;
max-width:100%;
margin:auto;
box-sizing:border-box;

}

原因是当元素定位时元素将会正常流动。例如固定，绝对。 Out正常流意味着元素不会在页面中占用任何空间，但仍然可见。

Div仍有高度：0px

3 个答案: