Как заставить содержимое нижнего колонтитула на главной странице сдвигаться вниз, когда этого требует основное содержимое?
Прошло некоторое время с тех пор, как я имел дело с ASP.NET, и впервые мне пришлось иметь дело с главными страницами. Я следил за учебниками, все в порядке, за исключением проблемы с нижним колонтитулом.
На главной странице есть блоки для 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: relative» помогло.
Ответы 3
Это не похоже на проблему с эталонной страницей, это похоже на проблему с макетом HTML / CSS. Что вы не указали, так это то, позиционируются ли ваши DIV абсолютно или они встречаются в потоке страниц.
Обычно, если вы НЕ позиционируете эти DIV абсолютно, размер DIV заголовка будет статическим, размер нижнего колонтитула будет статическим, но содержимое DIV должно иметь возможность растягиваться по вертикали, чтобы соответствовать содержимому. Это, в свою очередь, подталкивает ваш нижний колонтитул DIV ниже последней строки контента, чего вы и хотите. Но для того, чтобы это произошло, мы обычно опускаем "position: absolute;" из нижнего колонтитула DIV. Он должен течь.
Ваш вопрос в основном заключается в следующем: «У меня есть 3 DIV, один над другим. Они не подталкивают друг друга вниз должным образом».
Ответ почти всегда - мошенническое «позиция: абсолютная»; тег, проблема с полями, или, может быть, вы используете "контейнер страницы DIV", который не настроен должным образом для расширения при расширении его внутренних DIV.
Первоначально у меня вообще не было CSS, но я добавил его позже, чтобы поэкспериментировать (именно так я добился того, чтобы нижний колонтитул всегда был внизу браузера). На данный момент у меня нет тегов «position» в файле CSS - только выравнивание текста и размер шрифта. Предполагаю, что моя проблема в контейнере DIV.
Все ярлыки и текстовые поля на странице содержимого имели теги position: absolute. Изменение их на «относительные» позволило мне перемещать вещи и получать ожидаемые результаты.
Это скорее проблема 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>
Попытка вашего предложения вызвала изменение того, что я считаю неправильным в моем коде. Я думаю, что мои ярлыки и текстовые поля на странице содержимого неправильно связаны с ContentPlaceHolder.
случайное применение CSS непосредственно к разметке - не лучший вариант. Нам нужно увидеть его разметку, прежде чем мы узнаем, что ему нужно очистить: и то, и другое.
Я удалил свой ответ, связанный с очисткой, но все же согласен с тем, что в дизайне главной страницы лучше защищаться, поскольку вы не можете контролировать, что входит в контент. Четкое указание: и то, и другое в нижнем колонтитуле - хорошая защитная мера для изоляции содержимого главной страницы.
Очистка div между maincontent и footercontent поможет, но другие вещи, на которые следует обратить внимание, особенно в отстойных браузерах, таких как IE6, которые плохо очищаются или плавают, - это высота и переполнение. Скорее всего, нет, но если вы скрываете переполнение и устанавливаете высоту, это обрезает любой контент, выходящий за пределы высоты. Что-то проверить.
Часто установка float: left; на всех ваших основных элементах div поможет в сочетании с div очистки.
Кроме того, «размещение содержимого нижнего колонтитула внизу» означает, что оно абсолютно позиционировано, как указывали другие респонденты. Пока footercontent следует за очищающим div, он должен устанавливаться внизу вашего контента, а не внизу страницы.
Я заметил, что вы тоже используете центральный тег. Это и div align = center больше не являются стандартными и также могут мешать вам. Использовать маржу: 0px автоматически; и выравнивание текста: по центру; вместо.
В целом я рекомендую вам сделать три вещи:
- запустите свое приложение как минимум в трех браузерах, хотя бы в одном из них должен быть Firefox с установленным Firebug. При запуске приложения вставьте URL-адрес из браузера по умолчанию в другие, которые вы используете. Определите, где у вас возникла проблема.
- читайте на сайте positioniseverything.net, чтобы узнать, похожи ли какие-либо из перечисленных там проблем на вашу. Бергевины делают отличную работу и исправят вас. Особенно если проблема с IE6 / 7.
- создайте четкий класс с clear: both и height: 0, который можно использовать повторно. Если вам нужно настроить его, это проще, чем трогать каждый из встроенных стилей.
Удачи. Не могли бы вы отредактировать свой вопрос, чтобы мы тоже могли видеть стили?
Вам нужно будет опубликовать некоторый CSS, чтобы действительно получить ответы, звучит так, будто что-то плавает или абсолютно позиционируется.