Question

我有这个结构。我试图在帖子内容的底部基本上设置签名，而不管帖子的高度（头像的最小高度或更高）。现在邮件高度最小，邮件和签名不会占用整个内容后的高度，签名最好在后期内容中间。

我每页有多个帖子。谢谢！

<div id="post">
   <div id="avatar" style="float: left;"></div>
   <div id="post-content">
      <div id="message"></div>
      <div id="signature"></div>
   </div>

我尝试了很多东西，但似乎没有解决方案真正起作用，例如导致签名溢出的帖子。

Answer 1

将你的#post-content div浮动并给它一个相对位置。然后给你的#signature div一个绝对位置和一个低底值（0将与容器的底部齐平）。

#post{
	background:lightblue;
	overflow:hidden;
}

#post-content{
	float:left;
	padding:10px;
}

img{
	display:block;
}

#post::after{
	content:"";
	display:block;
	clear:both;
}

#post{
	position:relative;
}

#signature{
	position:absolute;
	bottom:10px;;
}

<div id="post">
    <div id="avatar" style="float: left;">
    	<img src="http://lorempixel.com/200/200" />
    </div>
    <div id="post-content">
        <div id="message">Post content post content  post content.</div>
        <div id="signature">John Doe</div>
    </div>
</div>

留言板帖子结构（HTML，100％高度）

1 个答案: