Question

我有一个如下所示的母版页：

<body id="body" runat="server" style="padding: 0px 25px 25px 25px;">
<div class="wrapper">
    <form id="form1" runat="server">
    <uc1:Header ID="header" runat="server" />
    <div style="width: 100%;" class="borderContent">
        <div style="float: left; margin: 20px 0px 20px 20px;">
            <uc2:MenuLeft ID="menuLeft" runat="server" />
        </div>
        <div style="width: 80%; float: left; margin: 20px;">
            <asp:ContentPlaceHolder ID="content" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="push">
        </div>
        <div style="clear: both;">
        </div>
    </div>
    </form>
</div>
<div class="footer">
    <p>
        Copyright (c) 2012</p>
</div>

在内容占位符中，我有一个包含两行的表，一个是标题，另一个是内容。如果内容长于屏幕的高度，我想保持页脚到位，内容和滚动条，但没有说容器有多大（我希望它保持它的比例，无论大小监视器）。也许它可以用百分比以某种方式完成？

由于

Answer 1

您可以使用

position: absolute;

在你的页脚和内容上，然后为你的页脚做

bottom: 0px;
height: 100px;

然后为内容做

bottom: 100px;
overflow: auto;

无论页面的大小调整如何，都会将页脚保留在页面底部，内容将位于页面底部。

这当然只是一个指导方针，你必须使用它来使它看起来像你想要的。

Answer 2

之前我做过类似的事情，你可以在页面加载上放一些JS / jQuery。基本上你会想：

根据页面的百分比计算容器的最大高度，或者根据需要计算固定金额。
将数据附加到contianer
确定容器现在是否大于步骤1中检索到的值。
如果容器大于内容，请将'overflow-y：scroll'添加到元素的样式
否则，请保持原样。

如果内容超出没有固定大小的容器大小，则显示滚动条

2 个答案: