0

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

<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>

在内容占位符中，我有一个有两行的表格，一个是标题，另一个是内容。如果内容长于屏幕的高度，我想将页脚和内容保持在适当的位置并使用滚动条，但不说容器有多大（我希望它保持它的比例，无论大小监视器）。所以也许它可以用百分比来完成？

谢谢

4

2 回答 2

0

你可以使用

position: absolute;

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

bottom: 0px;
height: 100px;

然后为内容做

bottom: 100px;
overflow: auto;

无论页面如何调整大小，这将使页脚保持在页面底部，内容将在其上方。

这当然只是一个指导方针，您必须使用它才能使其看起来像您想要的那样。

于 2012-11-15T14:14:03.273 回答
0

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

  1. 根据页面的百分比或您喜欢的固定数量计算容器的最大高度。
  2. 将数据附加到容器
  3. 确定容器现在是否大于在步骤 1 中检索到的值。
  4. 如果容器大于内容，则在元素的样式中添加 'overflow-y:scroll'
  5. 否则，保持原样。
于 2012-11-15T17:37:29.780 回答