Позиции html / css [дубликаты]

Question

Позиции html / css [дубликаты]

0

У меня есть некоторые проблемы с прикреплением нижнего колонтитула к нижней части страницы. В тот момент, когда я просматриваю его в Internet Explorer, он сосредоточен под остальной частью контента, но не внизу. Когда я хочу просмотреть его в Chrome, он будет стоять рядом с каким-то другим контентом. Может ли кто-нибудь объяснить мне, почему и как это исправить? Ниже я включил некоторый код для справки:

HTML:

<footer class="mainFooter">
                <p>Copyright &copy; <a href="https://www.google.nl">www.baica.nl </a></p>
            </footer>

CSS:

.mainFooter{
    display:block;
    width:100%;
    height:50%;
    margin:20% auto;
    color:yellow;
    text-align: center;
}

Joal 20 март 2014, в 20:08

Источник

0

ryanfait.com/html5-sticky-footer Попробуйте это решение.
nCore 20 март 2014, в 18:37

Теги:

html

css

browser

positioning

3 ответа

0

загляните в префикс браузера для вашего кода css и настройте его для каждого браузера, чтобы предотвратить ошибки в рендеринге вашего html/css. Взгляните на поддержку браузера css3 для получения дополнительной информации, надейтесь, что это поможет

7888 20 март 2014, в 17:07

0

Где находится остальная часть html. Нижний колонтитул, который я предполагаю, находится в контейнере, и этот контейнер должен охватывать высоту вашего окна, используя что-то вроде

min-height: 700px

то в вашем css вы установите

display: table-cell; vertical-align: bottom;

или положение: абсолютное; bottom: 0;

user3277102 20 март 2014, в 16:07

Ещё вопросы

ryanfait.com/html5-sticky-footer Попробуйте это решение.

gillytech · Accepted Answer · 2014-03-20T16-19-00.000Z

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

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
    color:yellow;
    text-align: center;
}

Затем настройте свою страницу, чтобы следовать этой структуре HTML.

<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2014</p>
</div>

Вы также отметили, что ваш нижний колонтитул плавает в одну сторону или другой рядом с другим контентом. Я предполагаю, что это на многоколоночном макете. В этом случае вы должны использовать clear: both

.footer, .push {
    clear: both;
}

TYVM, я исправил это с твоей помощью!
@Joal Отлично! Вы не против принять мой ответ?