Div高度不会根据内容自动调整

Question

如何水平垂直居中一个 div 并调整高度以适应内容？

示例代码

这是我的 HTML 代码：

 <div class="sprite">
  </div>

 <div class="content">
     <span>close</span>
     <div class="centered">

         lorem lipsum.....

     </div>

 </div>

还有 CSS：

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0.6;
}

.content{
     border:1px solid red; 
     z-index:21; 
     position: absolute; 
     margin:auto; 
     padding:10px;
     left: 0px;
     top: 0px; 
     bottom:0px; 
     right:0px;
     height:30%; 
     width:30%;  
     text-align:center; 
}
.content span{
     position:absolute; 
     top:0px; 
     right:0px;}

.centered{
     height:100%; 
/* Internet Explorer 10 */
     display:-ms-flexbox;
     -ms-flex-pack:center;
     -ms-flex-align:center;

/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

/* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

/* W3C */
   display:box;
   box-pack:center;
   box-align:center;
}

这是我想要的：

- POIR

---

可能是重复的问题：如何使 div 调整其高度以适应容器？ - Ciro Santilli OurBigBook.com

Answer 1

将.content类编辑为以下css，并删除position absolute

height:auto;
overflow:visible;

- Pradip Borde

Answer 2

在你的.content类中，删除

position: absolute;

并添加

margin-top:24%;

以使其垂直居中对齐，并考虑内容高度。


absolute定位属性很难进行样式设置！
Fiddle：http://jsfiddle.net/logintomyk/Xxfhn/
编辑：
这是修改的CSS：

  .sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
     width: 100%;
    /* height: 100%; */
    background-color: gray;
    opacity: 0.6;
    border:1px solid #FFF;
    text-align:center;
}

.content{
     border:1px solid red; 
     position:relative;
     z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
     margin:auto;
     padding:10px;
     width:30%;  
     margin-top:24%;
     text-align:center; 
}

.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}

Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/2/

关键是将 absolute 的 <span> 对齐到 relative 的 content 类中....

- NoobEditor

---

很遗憾，关闭的span必须在class为“content”的div角落里，而精灵图覆盖了我的内容div。 - POIR

好的...明白了...让我试试！ :) - NoobEditor

谢谢@Mayank！我在等答案 :) - POIR

内容div必须位于页面中央（因此我们不能使用margin-top:24％;应该是margin:auto）。我仍然看到精灵覆盖了内容面板。有什么想法吗？ - POIR

最终编辑的代码如上所示：http://jsfiddle.net/logintomyk/Xxfhn/2/。由于定位的原因，margin:0会将其推到顶部。 - NoobEditor

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/42138/discussion-between-mayank-and-otix - NoobEditor

Answer 3

.content{
     border:1px solid red; 
     position:relative;

     margin:auto;
     padding:10px;
     width:30%;  
     margin-top:4%;
     text-align:center; 
}

.content span{position:absolute;right:0;top:0;text-align:right;}

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;

     width: 100%;

    background-color: gray;
    opacity: 0.6;
    border:1px solid #FFF;
    text-align:center;
}

这有帮助吗？

- SRC SRC

Answer 4

将你的css替换为我的...

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0.6;
}

.content{
     border:1px solid red; 
     z-index:21; 
     position: absolute; 
     margin:auto; 
     padding:10px;
     left: 0px;
     top: 0px; 
     bottom:0px; 
     right:0px;

     width:30%;  

     text-align:center; 
}

.content span{position:absolute; top:0px; right:0px;}

.centered{

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

- SRC SRC

---

具有 class content 的 div 元素的高度必须与具有 class centered 的 div 元素的高度相等。在您的情况下，高度为100％。 - POIR

这不就是你想要的吗？ - SRC SRC

请看第一篇帖子附上的图片。 - POIR

Answer 5

你让自己变得很难，只需要在类内容中将位置更改为相对位置即可，如下所示：

 .content{
 border:1px solid red; 
 z-index:21; 
 position: absolute; 
 margin:auto; 
 padding:10px;
 left: 0px;
 top: 0px; 
 bottom:0px; 
 right:0px;
 height:30%; 
 width:30%;  
 text-align:center; 
 }

- CodingSince007

---

你的回答中写的是 position: absolute; 而不是 relative。 - Matt

你为什么要在6个月后才评论呢？@Matt，你错过了时机。而且如果你读了我的评论，我提到了需要修复的地方和方法。 - CodingSince007