CSS проблема - нижний колонтитул идет слишком долго? - PullRequest
2 голосов
/ 20 октября 2011

У меня небольшая проблема с нижним колонтитулом на этом сайте. Я ищу, чтобы у него была минимальная установленная высота и поток вниз страницы независимо от разрешения. Вроде как липкий нижний колонтитул, но я хочу, чтобы он упирался в конец контейнера над ним.

Эта проблема одинакова для всех современных браузеров (Safari, Chrome, IE и Firefox).

Слишком много CSS для публикации здесь, но Firebug или источник представления покажут соответствующий стиль. Любая помощь будет принята с благодарностью.

http://034732e.netsolhost.com/gdlsk_joomla/

Ответы [ 4 ]

2 голосов
/ 20 октября 2011

Спасибо за скриншот. Ваше описание теперь имеет больше смысла. Я бы сделал следующее. Прямо сейчас у вас есть что-то вроде

<body>
  <page>
     <header />
     <bodycontent />
  </page>
  <footer />
<body>

Я бы подумал, что-то вроде этого

<body height: 100%;>
    <page height: 100%; background: gray;>
      <header background: black; />
      <bodycontent background: black; />
      <footer />
    </page>
<body>

По сути, мы устанавливаем тело и страницу на 100%, что означает, что они занимают весь экран. Страница использует тот же цвет bg, что и нижний колонтитул. Наконец, мы устанавливаем заголовок и bodycontent, чтобы иметь черный фон, чтобы они покрывали серый страницы.

0 голосов
/ 30 октября 2015

У меня была похожая проблема, она должна выглядеть следующим образом:

HTML

<footer id="wrapper" class="main_footer">
    <nav>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
   </nav>
</footer>

CSS

#wrapper {
 position: absolute;
 width: 100%;
 }
0 голосов
/ 20 октября 2011

попробуйте эти изменения в вашем css:

body > #page {
height: 100%;
}

@#footer: remove-> property top:0;
add-> property bottom:0;
0 голосов
/ 20 октября 2011

Указание 100% высоты в нижнем колонтитуле не соответствует тому, что вы думаете. Вы говорите, что хотите, чтобы высота составляла 100% от тела, а не просто «расширялась, чтобы заполнить» оставшееся пространство. На самом деле это будет 100% высоты, плюс все остальное, что вы добавили. Это достижение минимального роста в 150 пикселей и более.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...