Intereting Posts
Форсировать содержимое HTML, чтобы оно соответствовало ширине устройства с помощью WkWebview Как сделать цвет фона div прозрачным в CSS Загрузка шаблона после запроса ajax с использованием ejs Как вы анализируете плохо отформатированный HTML-файл? рендеринг html-текста в bitmap с использованием javascript без serverSide-кода Rails Как передать параметры из controllerа в after_save внутри модели Невозможно удалить динамически добавленный контент с помощью jQuery Отображение иерархии «OPTION» в теге «SELECT» Автоматическое заполнение таблицы данными с использованием JavaScript и JSON CSS: два divs – один заполняет пространство, один сжимается до соответствия Проверка информации в HTML-кодовом позиционировании Невозможно получить значение обещания ES6 для отображения в режиме AngularJS Кнопка просмотра без загрузки файла в html Загрузите файл в другом месте с помощью HTML5 Атрибут загрузки html5 не работает в FF

Центральный нижний колонтитул, установленный внизу IE

Я кодирую веб-интерфейс для университетского проекта, и я занимаюсь этой проблемой:

Я хочу, чтобы мой нижний колонтитул фиксировался внизу, чтобы он был на месте, независимо от того, какой экран я использую, или если я переключаю полноэкранный режим

Он работает во всех других браузерах, кроме IE7 (мне не нужно поддерживать предыдущие версии)

HTML

     
Discover more about the word DESTINY ! Click one of the icon above! (F11 Toggle Full / Standard screen)

CSS:

 #wrapper{ text-align:center; margin:0 auto; width:750px; height:430px; border:1px solid #fff; } #menu{ position:relative; margin:0 auto; top:350px; width:450px; height:60px; } #destiny{ position:relative; top:380px; color:#FFF; font-size:1.5em; font-weight:bold; border:1px solid #fff; } #breadcrumbs{ list-style:none; } #breadcrumbs li{ display:inline; color:#FFF; } #footer{ position:absolute; width:750px; height:60px; margin:0 auto; text-align:center; border:1px solid #fff; bottom:0; } .clear{ clear:both; } то и #wrapper{ text-align:center; margin:0 auto; width:750px; height:430px; border:1px solid #fff; } #menu{ position:relative; margin:0 auto; top:350px; width:450px; height:60px; } #destiny{ position:relative; top:380px; color:#FFF; font-size:1.5em; font-weight:bold; border:1px solid #fff; } #breadcrumbs{ list-style:none; } #breadcrumbs li{ display:inline; color:#FFF; } #footer{ position:absolute; width:750px; height:60px; margin:0 auto; text-align:center; border:1px solid #fff; bottom:0; } .clear{ clear:both; } 

Белые границы существуют только для целей отладки

Приложение размещено по адресу http://www.eezzyweb.com/destiny/.

Любое предложение оценено

margin: auto; это то, что сломано в IE7. Вы можете обойти его с помощью

 #footer { width: 100%; left: 0px; } 

, так как этот div растягивается до полной ширины, а ul автоматически выравнивается до середины.
Но, возможно, это не то, что вы хотите.

Если это не приемлемое решение, люди в Интернете говорят, что вы можете исправить это, совместив текст родителя с центром – но это может привести к потере остальной части макета … вам придется поиграть с ним, но, по крайней мере, вы знаете, что происходит плохо.

CSS:

 html, body { height: 100%; margin: 0; padding: 0; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */ } #footer, #push { height: 150px; /* #push must be the same height as #footer */ } 

HTML:

  
от

Код, адаптированный из http://ryanfait.com/sticky-footer/

Я использовал этот подход на нескольких сайтах, которые я разработал, включая мой личный сайт. Он отлично работает! И даже в IE6 (даже если вы сказали, что это не нужно).

  HTML, 
 body {
     высота: 100%;
 }
 #wrapper {
     позиция: относительная;
     высота: auto! important;
     высота: 100%;
     мин-высота: 100%;
 }
 #footer {
     left: 0;
 }