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

Been a while since I've dealt with ASP.NET and this is the first time I've had to deal with master pages. Been following tutorials everything is fine except a problem I'm having with the footer.

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

The master page has divs for topContent, mainContent and footerContent. In mainContent I have a ContentPlaceHolder.

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

The default content page (just getting some proof-of-concept going here) has a few labels and text boxes in it with one multi-line text box in the Content area. "Content1" properly links back to ContentPlaceHolder1 back on the master page.

默认内容页面(只是获取一些概念验证)在其中有一些标签和文本框,在“内容”区域中有一个多行文本框。 “Content1”在母版页上正确链接回ContentPlaceHolder1。

When I run the site, the content appears but the footer section isn't "pushed down" by the now-filled ContentPlaceHolder - it almost acts like a background image.

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

What attribute am I missing here? I tried using CSS to force the footerContent to the bottom, but that just put the fotter content at the bottom of the browser and when I expanded the multi-line text box to greater than the browser's window height, the same thing happened (content overlaying the footer)

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

I know this has to be something simple that I'm missing.

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

The basics of the master page are as follows:

母版页的基础知识如下:

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

Help!

EDIT: Turns out that VS2005 was putting "position: absolute" tags on all the components (labels and text boxes) that I put on the content.aspx page. Going into the asp tags and changing them to "position: relative" did the trick.

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

3 个解决方案

#1

This doesn't sound like a master page issue, this sounds like an HTML/CSS layouting issue. What you haven't stated is whether your DIVs are absolutely positioned or whether they occur within page flow.

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

Normally, assuming you're NOT positioning those DIVs absolutely, the header DIV will be statically sized, the footer will be statically sized, but the content DIV should be allowed to stretch vertically to fit the content. This in turn pushes your footer DIV below the last line of content, which is what you want. But in order for that to happen, we usually omit "position: absolute;" from the footer DIV. It needs to flow.

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

Your question is basically asking, "I have 3 DIVs, one on top of the other. They're not pushing each other downward appropriately."

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

The answer is almost always a rogue "position: absolute;" tag, a margin issue, or maybe you're using a "page container DIV" that's not set appropriately to expand as its interior DIVs expand.

答案几乎总是一个流氓“位置:绝对;”标签,保证金问题,或者您正在使用“页面容器DIV”,因为其内部DIV扩展而未适当扩展。

#2

This is more an HTML + CSS issue and not an asp.net masterpage issue.
Here is how I would Change the Code to:

这更像是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>

#3

A clearing div between maincontent and footercontent will help, but other things to watch out for, especially in sucky browsers like IE6 that don't clear or float well, are height and overflow. You're probably not, but if you're hiding overflow and setting a height, that truncates any content that flows past the height. Something to check.

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

Often, setting float: left; on all your main div elements will help in conjunction with the clearing div.

通常,设置float:left;在所有主要div元素上将有助于与清除div一起使用。

Also, "putting the footer content at the bottom" implies that it is absolutely positioned, as the other responders have pointed out. As long as footercontent follows the clearing div, it should set up at the bottom of your content, and not at the bottom of the page.

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

I notice you're using a center tag, as well. That, and div align=center, aren't standard anymore, and could be messing with you as well. Use margin: 0px auto; and text-align: center; instead.

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

I recommend you do three things in general:

我建议你做三件事:

pull up your app in at least three browsers, at least one of which should be Firefox with Firebug installed. When you launch the app, paste the URL from your default browser into the others you're using. Identify where you're having the problem.

在至少三个浏览器中提取您的应用程序,其中至少有一个应该是安装了Firebug的Firefox。启动应用程序时,将默认浏览器中的URL粘贴到您正在使用的其他浏览器中。确定您遇到问题的位置。

read up at positioniseverything.net to see if any of the problems listed there resemble yours. The Bergevins do great work, and will set you straight. Especially if IE6/7 is a problem.

在positioniseverything.net上阅读,看看那里列出的任何问题是否与你的相似。 Bergevins做了很棒的工作,并会让你顺利。特别是如果IE6 / 7是一个问题。

make a clear class with clear:both and height: 0 that you can reuse. If you have to tweak it, it's easier than touching each of the inline styles.

制作一个清晰的明确类:both和height:0,你可以重复使用。如果你必须调整它,它比触摸每个内联样式更容易。

Good luck. By any chance, can you edit your question so that we can see the styles, too?

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

#1