Question

我遇到了一个问题，同时在我的网站上为邮件创建了一个列。可能每条消息的长度都不同，所以div的高度包含它们应该是自动的。不知怎的，它不起作用。你能否告诉我，我的代码中哪一部分会导致问题？容器div不随内容扩展。

以下是demo

CSS：

.ConvoCol2 {
width: 600px;
bottom:-50px;
position:absolute;
/*max-height:98vh;*/
margin-left: 0px;
height:91.95vh;
background-color:white;
display:inline-block;
padding-bottom:100px;}

.Typer {
width: 600px;
bottom:0px;
position:absolute;
/*max-height:98vh;*/
left: 0px;
height:100px;
background-color:black;
z-index:2;
padding-bottom:100px;}

.messageblock {
border: 1px solid lightgrey;
width: 600px;
position:relative;
top:0px;
left:0px;
min-height: 20px;
height:auto;}

.messageid {
left: 10px;
position:absolute;
top:10px;
}

.messageid p {
font-family:Arial;
font-size: 1em;
top: -15px;
display:inline-block;
position:absolute;
width: 200px;
font-weight:bold;
left: 65px;}

.msgcontent {
width: 560px;
font-family:Arial;
position:absolute;
left:30px;
top: 60px;
height:auto;
min-height: 30px;
word-wrap:break-word;}

.messageid img {
height:40px;
width:40px;
left: 20px;
}

HTML：

     <div class="ConvoCol2">
            <div class="messageblock">
                <div class="messageid">
                    <img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" />
                    <p> Name Here</p>

                </div>
                <div class="msgcontent">
                   asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas
                </div>
            </div>


            <div class="Typer">

            </div>
        </div>

谢谢。

Answer 1

当您使用position:absolute或position:fixed时，它将被剪切并放置在新图层上（如果您将其与photoshop的工作方式进行比较），因此您的浏览器不会“知道”尺寸不再是，当定位其他元素时，它只会给它0高度。或者@Terry评论说：

它将从文档流/布局中删除元素，但不会干扰其他元素的定位或其尺寸他们的父母。

position:absolute;
left:30px;
top: 60px;

例如可以替换为：

margin-left:30px;
margin-top:60px;

高度：自动无法正常工作，div不会随内容扩展

1 个答案: