Question

自从我处理ASP.NET以来，已经有一段时间了，这是我第一次处理母版页。按照教程一切都很好，除了我的页脚问题。

母版页包含topContent，mainContent和footerContent的div。在mainContent中，我有一个ContentPlaceHolder。

默认内容页面（只是在这里获得一些概念验证）中有一些标签和文本框，在“内容”区域中有一个多行文本框。 “Content1”正确地链接回主页面上的ContentPlaceHolder1。

当我运行网站时，内容会显示，但页脚部分不会被现在填充的ContentPlaceHolder“推下” - 它几乎像背景图像一样。

我在这里缺少什么属性？我尝试使用CSS强制将footerContent强制到底部，但这只是将fotter内容放在浏览器的底部，当我将多行文本框扩展到大于浏览器的窗口高度时，同样的事情发生了（内容覆盖）页脚）

我知道这必须是我想念的简单。

母版页的基础知识如下：

<form id="form1" runat="server">
  <div id="topContent">
     <table style="width: 832px">
     </table>
  </div>

  <div id="mainContent">
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
     </asp:ContentPlaceHolder>
  </div>

  <div id="footerContent">
     <br/><br/>
     <center style="font-size: small; font-style: italic; font-family: Arial">
         <a target="_new" href="/Disclaimer.html">Security and Privacy Notice</a><br/>
         ...
     </center>
  </div>  
</form>

帮助！

编辑：事实证明VS2005在我放在content.aspx页面上的所有组件（标签和文本框）上放置了“position：absolute”标签。进入asp标签并将它们更改为“position：relative”就可以了。

Answer 1

这听起来不像是母版页问题，这听起来像是HTML / CSS布局问题。你没有说明你的DIV是否绝对定位或是否在页面流程中出现。

通常，假设您没有绝对定位这些DIV，标题DIV将是静态大小，页脚将是静态大小，但应允许内容DIV垂直拉伸以适合内容。这反过来会将您的页脚DIV推到最后一行内容之下，这就是您想要的。但为了实现这一点，我们通常省略“position：absolute;”来自页脚DIV。它需要流动。

你的问题基本上是在问：“我有3个DIV，一个在另一个之上。他们没有相应地向下推动。”

答案几乎总是流氓“位置：绝对;”标签，保证金问题，或者您使用的“页面容器DIV”在内部DIV扩展时未正确设置以进行扩展。

Answer 2

这是一个HTML + CSS问题，而不是asp.net主页问题以下是我将代码更改为：

的方法

    <div id="mainContent"style="position:relative;">
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       </asp:ContentPlaceHolder>
   </div>
<br style="clear:both;" />
 <div id="footerContent" style="position:relative;">
     <br/><br/>
     <center style="font-size: small; font-style: italic; font-family: Arial">
         <a target="_new" href="/Disclaimer.html">Security and Privacy Notice</a><br/>
         ...
     </center>
 </div>

Answer 3

主要内容和页脚内容之间的清除div会有所帮助，但是需要注意的其他事项，尤其是IE6等不清晰或浮动不好的浏览器，都是高度和溢出。您可能不是，但如果您隐藏溢出并设置高度，则会截断任何超过高度的内容。要检查的东西。

经常设置float：left;在所有主要div元素上将与清算div一起使用。

此外，“将页脚内容放在底部”意味着它绝对定位，正如其他响应者所指出的那样。只要footercontent跟在清除div之后，它应该设置在你内容的底部，而不是在页面的底部。

我注意到你正在使用中心标签。那个，和div align = center，不再是标准了，也可能会弄乱你。使用保证金：0px auto;和text-align：center;代替。

我建议你做三件事：

在至少三个浏览器中启动您的应用程序，其中至少有一个应该是安装了Firebug的Firefox。启动应用程序时，将默认浏览器中的URL粘贴到您正在使用的其他浏览器中。确定您遇到问题的地方。
在positioniseverything.net上阅读，看看那里列出的任何问题是否与你的相似。 Bergevins做得非常好，并会让你顺利。特别是如果IE6 / 7是个问题。
制作一个清晰的明确课程：both和height：0，你可以重复使用。如果你必须调整它，它比触摸每个内联样式更容易。

祝你好运。您是否可以编辑您的问题，以便我们也能看到样式？

当主要内容需要时，如何在母版页上获取“页脚”内容以向下推？

3 个答案: