Question

我有一个DIV，其边界由图像组成。我想要做的是，只要内容不适合内容区域，就让这个DIV自动扩展（仅限高度）。否则它应该只使用最小高度。这是我的标记：

XHTML：

<div id="alerts">
    <div id="alerts-top"></div>
    <div id="alerts-left"></div>

    <div id="alerts-content">
        <div id="alerts-header">
            <p>Alerts</p>
        </div>

        <div id="alerts-main">
            <!-- content in here -->
        </div>
    </div>

    <div id="alerts-right"></div>
    <div id="alerts-bottom"></div>
</div>

CSS：

#alerts { float: left; width: 267px; height: 200px; }

#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }

#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }

#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }

这对我不起作用 - 底部边框与左右边框之间存在间隙。内容区域为#alerts-main。

Answer 1

试试#alerts-bottom：

#alerts #alerts-bottom {
    float: left;
    background: url(../images/alerts-bottom.png) no-repeat;
    height: 11px;
    width: 258px;
    margin-top: -9px;
}

使用margin-top属性的负值，您可以控制div的显示方式（在这种情况下，您将强制#alerts-bottom div呈现{{ 1}}在默认显示上方。）

希望它有所帮助。

Answer 2

经过“五分钟”的考虑后，我写了这段代码，它会做你想要的。只需更改样式即可将图像添加为背景。首先是CSS：

#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }

HTML：

<div id="wrapper">
    <div id="top-margin">
        <div id="alerts">Alerts alerts alerts</div>
    </div>
    <div id="right-margin"></div>
    <div id="bottom-margin"></div>
    <div id="left-margin"></div>

    <div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>

#wrapper的高度将随着添加更多文字而扩展。对不起，我已经更改了ID的名称并证明了文本的合理性。但这很容易解决。

使用边框图像自动展开DIV

2 个答案: