Question

我有一块文字放在图片上方。然后在这下面有一个页脚。但是文本来自数据库，所以有时文本比图片高，有时更短。我希望页脚低于＆＃34;整个事物＆＃34;在任一情况下。

像这样 - 想象XXX的是图片

情景1：

XXXXXXXXXXXXXXXX
XXXX  Short XXXX
XXXX  text  XXXX
XXXXXXXXXXXXXXXX

-- Footer --

情景2：

XXXXXXXXXXXXXXXX
XXXX  Long  XXXX
XXXX  text  XXXX
XXXX  runs  XXXX
      past
      the
      picture.

-- Footer --

很容易将文字放在图片的顶部，position: absolute用于其中一个。但是然后页脚的位置不考虑绝对元素。

目前，我有两个不同版本的屏幕，一个是静态图片，文字是绝对的，我希望文字更长的情况;对于文本较长的情况，文本是静态的，图片是绝对的。这有效，但仅仅因为我知道今天数据库中有哪些数据。我可以让程序检查文本，但是如果不知道用户为浏览器设置的窗口大小，更不用说字体大小等，我无法知道它的布局有多高。

也许position: absolute不是正确的方法吗？

更新*

有人建议我做个小提琴。我当时就是这样，但是我看到亚当B史密斯做了一个能很好地说明我的问题：http://jsfiddle.net/DIRTY_SMITH/EgLKV/6183/

如果文字比图像高，那小提琴看起来很棒。现在删除一堆文本，使文本比图像短，并且您看到页脚与图像重叠。

Answer 1

如果您知道图像的大小，并将容器的大小设置为与图像相同，则它确实有效。

＆＃13;

.container {
    border: 1px solid red;
    position: relative;
    display: table;
    width: 250px;
    height: 193px;
}
.container img {
    position: absolute;
    z-index: -1;
}
.container span {
    background: rgba(255,255,255,.7);
    display: table;
    width: 80%;
    margin: auto;
    margin-top: 25%;
    margin-bottom: 5%;
}
.footer {
    background: pink;
}

＆＃13;

<div class="container">
    <img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</div>
<div class="footer">foooooooter</div>

<br>
    
<div class="container">
    <img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<div class="footer">foooooooter</div>

＆＃13;

Answer 2

好的，这个人会为你做http://jsfiddle.net/DIRTY_SMITH/EgLKV/6185/

洛尔

#container{min-height: 400px;}
#image
{    
    position:absolute;
    z-index:-9999;
    left:0;
    top:0;
}
#text
{
    z-index:9999;
    width: 200px;  
    color:red;
    font-size:24px;
    font-weight:bold;

}
.footer {
    background:#ffab62;
    width:100%;
    height:100px;

    z-index:9999;
    bottom:0;
    left:0;
}

将页脚放在CSS

2 个答案: