Как я могу получить содержимое «нижнего колонтитула» на главной странице, чтобы оно давило вниз, когда оно требуется для основного содержимого?

Question

Прошло некоторое время с тех пор, как я имел дело с ASP.NET, и мне впервые приходится иметь дело с мастер-страницами. После учебников все в порядке, кроме проблемы с нижним колонтитулом.

На главной странице есть div для topContent, mainContent и footerContent. В mainContent у меня есть ContentPlaceHolder.

На странице контента по умолчанию (только что полученной здесь пробной версией концепции) есть несколько меток и текстовых полей с одним многострочным текстовым полем в области контента. «Content1» правильно ссылается на ContentPlaceHolder1 на главной странице.

Когда я запускаю сайт, появляется контент, но раздел нижнего колонтитула не «запихивается» теперь заполненным ContentPlaceHolder - он почти действует как фоновое изображение.

Какой атрибут мне здесь не хватает? Я попытался использовать CSS, чтобы принудительно вывести footerContent внизу, но это просто поместило содержимое нижнего колонтитула внизу браузера, и когда я расширил многострочное текстовое поле до высоты окна браузера, произошло то же самое (наложение содержимого нижний колонтитул)

Я знаю, это должно быть что-то простое, что мне не хватает.

Основы главной страницы следующие:

<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 помещал теги "position: absolute" на все компоненты (метки и текстовые поля), которые я поместил на страницу content.aspx. Зайдя в теги asp и изменив их на «position: родственник», добились цели.

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 между maincontent и footercontent поможет, но следует обратить внимание и на другие вещи, особенно в таких плохих браузерах, как IE6, которые плохо очищаются или плавают, это высота и переполнение. Вы, вероятно, нет, но если вы скрываете переполнение и устанавливаете высоту, это обрезает любой контент, который течет за высоту. Что-то проверить.

Часто настройка поплавка: слева; на все ваши основные элементы div поможет в сочетании с очищающим div.

Кроме того, «размещение нижнего колонтитула в нижней части» подразумевает его абсолютное позиционирование, как указали другие респонденты. Пока footercontent следует за очищающим div, он должен располагаться внизу вашего контента, а не внизу страницы.

Я заметил, что вы также используете центральный тег. Это, и div align = center, больше не являются стандартными, и, возможно, с вами тоже будут связываться. Используйте маржу: 0px auto; и выравнивание текста: по центру; вместо этого.

Я рекомендую вам сделать три вещи в общем:

• загрузите ваше приложение по крайней мере в трех браузерах, по крайней мере, один из которых должен быть Firefox с установленным Firebug. Когда вы запускаете приложение, вставьте URL из браузера по умолчанию в другие, которые вы используете. Определите, где у вас возникла проблема.
• Читайте на сайте positioniseverything.net, чтобы узнать, не похожи ли какие-либо из перечисленных проблем на вашу. Bergevins делают большую работу, и установит вас прямо. Особенно, если IE6 / 7 является проблемой.
• создайте чистый класс с clear: both и height: 0, который вы можете использовать повторно. Если вам нужно настроить его, это проще, чем прикасаться к каждому из встроенных стилей.

Удачи. Можете ли вы отредактировать свой вопрос, чтобы мы тоже могли видеть стили?