div 高度不会调整以适应内容

Posted 2023-03-05

【中文标题】div 高度不会调整以适应内容

【英文标题】：Div height doesn't adjust to fit content

【发布时间】：2013-12-14 13:59:10

【问题描述】：

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

fiddle

这是我的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;

这就是我想要的：

【问题讨论】：

How to get a div to resize its height to fit container?的可能重复

【参考方案1】：

在您的 .content 类中，删除 position: absolute; 和添加 margin-top:24%; 在获取内容高度的同时将其垂直居中对齐absolute 定位的属性很难设置样式！

小提琴：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 spanposition:absolute;right:0;top:0;text-align:right; border:1px solid #F00000

小提琴：http://jsfiddle.net/logintomyk/Xxfhn/2/

诀窍是在 relative content 类中对齐 absolute <span> ......

【讨论】：

很遗憾没有。关闭的跨度必须在具有“内容”类的 div 的角落，并且精灵覆盖了我的内容 div。

是的……知道了……让我试试！ :)

谢谢@Mayank！我正在等待答案:)

内容 div 必须位于页面中心（所以我们不能使用 margin-top:24%；应该是 margin:auto）而且我仍然看到精灵覆盖了内容面板。有什么想法吗？

final.. 上面的编辑代码...http://jsfiddle.net/logintomyk/Xxfhn/2/ .....margin :0 由于定位，会将其推到顶部...

【参考方案2】：

用我的替换你的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 spanposition: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;

【讨论】：

类内容的div的高度必须等于类居中的div的高度。在你的情况下，高度是 100%。

这不是你想要的.. ??

见第一篇文章所附的图片。

【参考方案3】：

编辑 .content 类以具有以下 css 并删除绝对位置

height:auto;
overflow:visible;

【参考方案4】：

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

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


.content spanposition: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;

有帮助吗

【参考方案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; 
 

【讨论】：

你的回答说position: absolute; 不是相对的。

你为什么要在 6 个月后发表评论？有点错过了@Matt 的时机。另外，我提到了要解决的问题以及如果您阅读我的 cmets 在哪里。