如何使母版页中 div 的高度在内容页中展开？

Posted 2023-03-06

【中文标题】如何使母版页中 div 的高度在内容页中展开？

【英文标题】：How to make the height of a div within a master page expand in a content page?

【发布时间】：2011-12-26 11:45:53

【问题描述】：

我有一个母版页，它有一个 div 作为整个页面的边框。

我希望这个 div 根据放置在内容页面中的内容进行扩展。

如何去做这件事？我在 div 中使用 clear:none 没有从母版页继承页面没有问题（即根本不使用母版页）。但是，当我使用母版页时，div 不会展开。

母版页中的当前代码：

<div class="page-border">
    <div class="header">
        HEADER</div>
    <div class="outer">
        <div class="content">
            <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="banner">
            BANNER
    </div>
    <br style="clear:none"/>
</div>

编辑：我在下面添加了 CSS 类：

.page-border

    width: 1000px;
    padding: 10px;
    margin: 0px auto;
    border: 1px solid gray;


.outer

    float: left;
    padding: 0px;
    margin-right: 0px;
    margin-top: 10px;
    width: 986px;
    margin-left: 12px;


.content

    float: left;
    height: 503px;
    width: 779px;
    margin-bottom: 0px;
    margin-left: 2px;

【问题讨论】：

发布一些代码。不过，顺便说一下，听起来您的内容页面在所有内容的底部都需要一个 ，但仍然在边框 div 内。

如果 .content 有一个静态高度，而你的内容比那个长，那么它就会溢出。也许尝试最小高度而不是高度。

【参考方案1】：

如果包装器 div 内的内容是浮动的，它不会环绕它。将overflow:hidden; 或overflow:auto; 添加到.content CSS 声明中以强制它与内容一起扩展。

【讨论】：

试过了，但失败了。没有将外部 div 与页面内容一起展开，而是相反。

【参考方案2】：

如果这不起作用，我们需要查看 .content 的样式规则

<div>
    <div class="content">
        <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
        <div style='clear:both'></div>
    </div>
    <div class="banner">
         BANNER  
    </div>
    <br style="clear:none" />
</div>

一个类的更新：

.content

    float: left;
    min-height: 503px;
    width: 779px;
    margin-bottom: 0px;
    margin-left: 2px;