如何使页脚尊重绝对定位的内容高度？答案

【问题标题】：How to make footer respect absolute positioned contents height?如何使页脚尊重绝对定位的内容高度？
【发布时间】：2016-12-19 21:37:21
【问题描述】：

我有以下页面：

标题左上角
标题下方的图片最大宽度
左侧图片下方的链接
页面内容在图片右侧很好地对齐
页脚（问题）

我使用绝对定位将我的内容定位在图片旁边。不确定内联块或浮动是否可以解决我的问题。

我现在的问题是页脚与我的内容重叠，因为绝对定位的内容失去了它的高度。

JSFiddle：https://jsfiddle.net/sc3e1t15/

.wrapper { position: relative; }
.title,
.footer  { font-weight: bold; }
.image   { font-style: italic; width: 210px; border: 1px solid red; }
.links   { max-width: 210px; }
.content { position: absolute; top: 18px; left: 220px; border: 1px solid green; }

<div class="wrapper">
  <div class="title">
    I'm the title.
  </div>
  <div class="image">
    I'm an image.
  </div>
  <div class="links">
    I'm some links.<br>
    I want to be on the left side too!
  </div>
  <div class="content">
    I'm the content.<br>
    I want to be shown neatly next to the image.<br>
    Spread over multiple lines<br>
    Nothing to see here<br>
    Staph reading me!<br>
    Love you brah.
  </div>
  <div class="footer">
    I'm a problem ... Because I disrespect the contents height.
  </div>
</div>

【问题讨论】：

标签： css sass

【解决方案1】：

试试这个。将你想要的内容包装在左侧并赋予它显示属性。

{显示：内联块；}

这里不需要使用位置。

.wrapper { position: relative; }
.title,
.footer  { font-weight: bold; }
.image   { font-style: italic; width: 210px; border: 1px solid red; }
.links   { max-width: 210px; }
.content { display:inline-block; border: 1px solid green; }
.left-contain { display: inline-block; vertical-align: top;}

<div class="wrapper">
 <div class="title">
    I'm the title.
  </div>
 <div class="left-contain">
  <div class="image">
    I'm an image.
  </div>
  <div class="links">
    I'm some links.<br>
    I want to be on the left side too!
  </div>
</div>
  <div class="content">
    I'm the content.<br>
    I want to be shown neatly next to the image.<br>
    Spread over multiple lines<br>
    Nothing to see here<br>
    Staph reading me!<br>
    Love you brah.
  </div>
  <div class="footer">
    I'm a problem ... Because I disrespect the contents height.
  </div>
</div>

【讨论】：