Bootstrap липкое столкновение кода нижнего колонтитула между высотой и дополнением

Question

Bootstrap липкое столкновение кода нижнего колонтитула между высотой и дополнением

1

Я пытаюсь добавить пример sticky-footer.html в мой проект начальной загрузки. однако есть столкновение кода в классе тела, который заворачивает мой макет.

В моем коде страницы с загрузочным фиксированным фиксированным navbar использует:

  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

В примере с липким нижним колонтитулом он использует:

  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }

На данный момент у меня есть теги тела, включенные в мой css. Все работает, за исключением версий ширины настольных страниц, с текущим css ниже я получаю липкий нижний колонтитул с дополнительной глубиной, а на странице есть вертикальная полоса прокрутки, хотя она не нужна? И все это связано с этим тегом тегов и дополнительными 60px.

  /* Sticky footer styles
  -------------------------------------------------- */

  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }

  /* Wrapper for page content to push down footer */
  #wrap {         
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it height */
    margin: 0 auto -190px;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    margin-top:20px;
    height: 190px;      
  }
  #footer {       
background-image:url(assets/img/herringboneLight.jpg);   
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {

    }
  }

 body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
 }

Cheers Alex

user2004211 23 янв. 2013, в 16:13

Источник

0

Поместите все свое тело в тег div и блокнот, который вместо этого будет моей попыткой решения.
Kansha 23 янв. 2013, в 14:48
0

Похоже, вы точно знаете, что является причиной проблемы; а именно две конфликтующие метки тела. Почему бы не поиграть с ними немного и обновить свой вопрос о том, как вы пытались это исправить, и что пошло не так?
Esoteric Screen Name 23 янв. 2013, в 15:08

Теги:

twitter-bootstrap

css

css3

height

1 ответ

Ещё вопросы

Поместите все свое тело в тег div и блокнот, который вместо этого будет моей попыткой решения.
Похоже, вы точно знаете, что является причиной проблемы; а именно две конфликтующие метки тела. Почему бы не поиграть с ними немного и обновить свой вопрос о том, как вы пытались это исправить, и что пошло не так?

ScottS · Answer 1 · 2013-01-23T15-08-00.000Z

Я не знаю, какие браузеры вы пытаетесь поддержать, но решение CSS3 (фактически в IE8+), я считаю, это изменить box-sizing на body:

body {
    padding-top: 60px;
    -moz-box-sizing: padding-box; /* or border-box */
    -webkit-box-sizing: padding-box; /* or border-box */
    box-sizing: padding-box; /* or border-box */
}

Это должно привести к тому, что height: 100% будет включать 60px в общей сумме. Он работает в Firefox, поэтому эта скрипка имеет полосы прокрутки, этого нет.

Работает угощение, спасибо за вашу помощь.
@user2004211: user2004211: Как новый пользователь здесь, позвольте мне напомнить вам, что вы должны «принять» этот ответ, нажав «галочку» под номером голосования слева. Кроме того, если вы нашли это особенно полезным, вы должны дополнительно проголосовать за ответ.