Принудительно <div></div> внизу веб-страницы по центру - PullRequest
Новая
       8

Принудительно <div></div> внизу веб-страницы по центру

8 голосов
/ 04 февраля 2009

У меня есть раздел <div>...</div> в моем HTML, который в основном похож на панель инструментов.

Есть ли способ, которым я мог бы переместить этот раздел в конец веб-страницы (документ, а не область просмотра) и центрировать его?

Ответы [ 6 ]

16 голосов
/ 04 февраля 2009

Я думаю, что вы ищете это: http://ryanfait.com/sticky-footer/

Это элегантное, решение только для CSS !

Я использую его, и он отлично работает со всеми видами макетов во всех браузерах! Насколько мне известно, это единственное элегантное решение, которое работает со всеми браузерами и макетами.

@ Джош: Нет, это не так, и именно этого хочет Бланкмен, он хочет, чтобы нижний колонтитул прилипал к нижней части документа, а не к области просмотра (окно браузера). Поэтому, если содержимое короче окна браузера, нижний колонтитул прилипает к нижнему краю окна, если содержимое длиннее, нижний колонтитул опускается и не виден, пока вы не прокрутите вниз.

Реализация Twitter Bootstrap

Я видел много людей, спрашивающих, как это можно сочетать с Twitter Bootstrap. Хотя это легко понять, вот некоторые фрагменты, которые должны помочь. 

// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}

.push {
  height: $footerHeight;
}

.wrapper > .container {
  padding-top: $navbarHeight + $gridGutterWidth;
}

@media (max-width: 480px) {
  .push {
    height: $topFooterHeight !important;
  }
  .wrapper {
    margin: 0 auto -1*($topFooterHeight + 2) !important;
  }
}

И грубая разметка тела: 

<body>
    <div class="navbar navbar-fixed-top">
        // navbar content
    </div>
    <div class="wrapper">
        <div class="container">
            // main content with your grids, etc.
        </div>
        <div class="push"><!--//--></div>
    </div>
    <footer class="footer">
        // footer content
    </footer>
</body>
5 голосов
/ 05 февраля 2009

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

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }
3 голосов
/ 04 февраля 2009

Я просто хочу уточнить, что вы здесь говорите:

внизу веб-страницы ( документ , а не область просмотра )

Естественно, div будет внизу «документа», в зависимости от вашего макета.

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

Мне кажется, что вы ищете липкие нижние колонтитулы, но когда вы говорите «документ», а не окно просмотра, я немного растерялся. Липкие нижние колонтитулы обычно делают следующее: следите за короткими страницами, и, если они короче, чем порт просмотра, липкий нижний колонтитул прикрепляет нижний колонтитул к нижней части.

Вот некоторые липкие нижние колонтитулы (есть гаджиллионы их, но это в порядке моих любимых):

Может быть, если бы вы дали быструю иллюстрацию или немного конкретнее о том, что вы хотите? Надеюсь, это поможет: D

1046 * Кен *

0 голосов
/ 04 февраля 2009

Лучше всего использовать JavaScript для определения размера вашей страницы. Вы можете получить высоту с помощью window.innerHeight с браузерами без IE и document.documentElement.clientHeight с IE. С этим значением вы должны быть в состоянии абсолютно позиционировать ваш элемент наверху страницы с этим значением минус высота вашего div. Если высота вашего div является переменной, вам необходимо проверить свойство divHeight для получения реальной высоты.

Для центрирования используйте следующий пример: 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            .wrapper
            {
                width: 100%;
                padding-left: 50%;
            }
            .test
            {
                width: 400px;
                margin-left: -200px;
                border: 1px solid black;
                padding-left: -200px;
            }
        </style>
    </head>
    <div class="wrapper">
    <div class="test">This is a test</div>
    </div>
 </html>

У вас есть div-обертка вокруг div, который вы хотите центрировать. Ширина обертки имеет ширину 100%, внутренний div имеет ширину, установленную на то, что вы хотите. Задайте для div-обертки отступ слева в 50%, а для внутреннего div - отрицательное левое поле, равное половине его ширины.

0 голосов
/ 04 февраля 2009

Вы можете просто дать div:

ясно: как; выравнивания текста: центр;

и поместите div как последний элемент перед закрывающим оператором body. Это заставит его быть последним элементом без чего-либо рядом с ним.

0 голосов
/ 04 февраля 2009

Попробуйте: Исправлены нижние колонтитулы без Javascript . Я не знаю, будет ли это идеально подходить, но я думаю, что это достаточно близко.

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

Нет похожих вопросов

...