代码之家 › 专栏 › 技术社区 › Alkanshel

用固定高度的面包片和可膨胀的肉片制作“div三明治”

css html

Alkanshel · 技术社区 · 14 年前

所以我有一个div三明治:三个div放在一个上面。由于背景图像的原因,面包片的高度都是固定的。肉是一个1倍高的垂直中继器图像。我需要一种方法来扩大肉从顶部面包溢出的内容击中底部面包底部。我想肉和底层面包需要一个包装器,但我不知道如何实现它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        #top {
            position:relative;
            height:100px;
            background-color:pink;
            width:460px;
            word-wrap:break-word;
        }
        #wrapper {
            position:relative;
        }
        #expand {
            min-height:100%;
            height:auto;
            background-color:#EEEFFF;
        }
        #bottom {
            height:100px;
            background-color:#EEEEEE;
        }
        div.clear{
            position:absolute;
            width:100%;
            clear:both;
            height:1px;
            overflow:hidden;
            border:solid orange;
        }
    </style>
    <title></title>
</head>
<body>

    <div id="top">
        a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
    </div>
    <div id="wrapper">
        <div id="expand"></div>
        <div id="bottom"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

我需要一种方法,使顶部的内容与底部包装中的“clear”相撞,并向下移动包装。

4 回复 | 直到 14 年前

david 14 年前

这就是你想要的效果吗?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        #top {
            position:absolute;
            height:100px;
            background-color:pink;
            width:460px;
            top:0px;
        }
        #wrapper {
            position:relative;
        }
        #expand {
            position:absolute;
            top:100px; /*height of top div*/
            bottom:100px; /*height of bottom div*/
            width:100%;
            background-color:#cccFFF;
        }
        #bottom {
            position:absolute;
            bottom:0px;
            height:100px;
            width:560px;
            background-color:#EEEEEE;
        }
        #text
        {
         position:relative;
        }
    </style>
    <title></title>
</head>
<body>

   <div id="wrapper">
      <div id="expand"></div>
      <div id="top"></div>
      <div id="bottom"></div>         
      <div id="text">
         a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
      </div>
    </div>
</body>
</html>

Paul D. Waite 14 年前

你能把你的东西从上面的面包片移到肉里吗?这将使扩张成为现实。

如果内容需要出现在顶部面包片背景之前,则可以使用 position: relative

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        #breadtop,
        #breadbottom {
            height: 100px;
            background-color: #977;
        }

        #breadtop {
            overflow: visible;
        }

        #meat {
            background-color: #fbd;
        }

        #content {
            position: relative;
            top: -100px;
            margin-bottom: -100px;
        }
    </style>
    <title></title>
</head>
<body>

    <div id="breadtop"></div>
    <div id="meat">
        <div id="content">
            a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
            a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
            a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
        </div>
    </div>
    <div id="breadbottom"></div>
</body>
</html>

我喜欢这个问题,因为它相当棘手,因为它包含短语expandable meat div。

JustcallmeDrago Vivek 14 年前

(如果你想要示例代码,我可以提出,但我需要更长的时间来回答)

对于3个切片,绝对定位所有切片。使用 top:0 和 bottom:0 top 和 bottom 声明等于顶部和底部切片的高度。这样,肉的顶部/底部将始终保持距离新div的顶部/底部X像素,其中X是顶部/底部切片的高度。

Mordi 14 年前

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/