Сделать контейнер div заполняет все макет с липким нижним колонтитулом

Я создаю новый макет для личного сайта.Сделать контейнер div заполняет все макет с липким нижним колонтитулом

Я использую Twitter Bootstrap 3, и мой первоначальный макет был сделан с использованием в качестве Exemple "бутстрапного с клейкой сноской" образец (http://getbootstrap.com/examples/sticky-footer-navbar/)

Это мой HTML:

<body> 
    <!-- Wrap all page content here --> 
    <div id="wrap"> 
     <!-- Begin page navigation --> 
     <nav id="nav-container" class="navbar navbar-default container" role="navigation"> 
      <div class="container"> 
       <!-- Here I put a very normal Bootstrap 3 navbar --> 
      </div> 
     </nav> 
     <!-- Begin page content --> 
     <div id="main-container" class="container"> 
      <!-- All my content goes here! --> 
     </div> 
    </div> 
    <!-- Begin page footer --> 
    <footer id="footer" class="container"> 
     <div class="container"> 
     </div> 
    </footer> 
</body>

липкой Footer CSS:

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; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -100px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 100px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 100px; 
}

И пользовательский стиль для моего Лайу т:

body { 
    /* Body's background will be grey */ 
    background-color: #C0C0C0; 
} 
#main-container { 
    /* A box where I'll put the content will be white */ 
    background-color: #FFFFFF; 
} 
#wrap { 
    height: 100%; 
    min-height: 100%; 
} 
#main-container { 
    min-height: 100%; 
    height: 100%; 
}

Этот код генерирует этот макет:

LayoutNow

Но, как вы можете видеть, div #main-container не растут «до конца макета. div поддерживать высоту содержания.

То, что я хочу, что это Див всегда заполняет всю страницу, как это:

LayoutThen

Многих решения по интернету сказали мне, чтобы исправить min-height до некоторого тестируемого значения, но таким образом я буду не быть способным поддерживать отзывчивость моего сайта (очень важно, чтобы мой макет всегда был отзывчивым, вот основная причина, по которой я использую Bootstrap 3).

Другое решение для вычисления высоты div с помощью javascript. Лично мне не нравится это решение. Я могу решить это только с помощью CSS.

Кто-то знает, как решить эту проблему?

источник

2014-01-09 vinigarcia87

Вы можете создать иллюзию # основного контейнера-расти до конца, установив # Wrap в цвет фона и то же значение как # main-container's. –

Да, у меня такая же проблема снова и снова, но я считаю, что ее невозможно сделать, по крайней мере, не с CSS и HTML – Ljubisa

Привет, ребята, спасибо за помощь! @AntonisGrigoriadis, ваше решение идеально! Все, что мне нужно было сделать, это установить, что мой «# wrap» имеет ту же ширину, что и «# main-container», и поместил цвет фона. – vinigarcia87

Я думаю, что min-height не работает из-за зарегистрированной проблемы. См. Это: stackoverflow.com/questions/8468066.

Простой способ создать иллюзию, что # main-container растет до конца, заключается в том, чтобы установить фоновый цвет # wrap того же значения, что и # main-container's.

источник

2014-03-05 19:00:19

Как они указали в ссылке, которую вы указали, это не ошибка, это именно то, как она работает. Процент высоты игнорируется, когда высота родителя строго не определена. 100% авто дает вам авто :) В качестве побочного примечания я нашел способ получить реальный полный контейнер, а не подделку его цветом фона. Проверьте мой ответ ниже. – Gufino2

Пока вы работаете над процентом, ваш сайт будет отзывчивым. Так используя min-height: 100% решает вашу проблему, которая является просто CSS. И если вы не хотите, чтобы Javascript участвовал здесь, это путь.

См. JS Fiddle DEMO. Ваш контейнер заполняет всю страницу.

#main-container { 
    min-height: 100%; 
    background: #fff; 
}

источник

2014-01-09 19:09:19 Morven

Здравствуйте, спасибо вам за помощь! к сожалению, у моего '# main-container' уже установлен' min-height: 100%; 'set, но он не работает. :/ – vinigarcia87

@ vinigarcia87 Попробуйте изменить высоту на '# wrap' на' height: 100%; '. Работал для меня! –

@Morven Вы можете указать, что вам нужно указать высоту как '100%' вместо 'auto'. Тогда, я думаю, это правильный ответ. :) –

Если вы хотите иметь липкий нижний колонтитул и полный полный основной контейнер, вам необходимо изменить свою структуру. Во-первых, позвольте мне объяснить, почему вы не можете решить эту проблему с помощью метода липкого нижнего колонтитула, который вы используете прямо сейчас:
Настройка # высота основного контейнера: 100% или минимальная высота: 100% не будет работать, потому что вы можете t использовать процентную высоту с родителем, высота которого строго не определена.Обратите внимание, что в принятом в настоящее время ответе считается ошибкой, но это не так, так оно и должно работать. В вашем примере # высота обхода устанавливается в auto, поэтому # высота основного контейнера просто игнорирует 100% и возвращает к авто.

Для того, чтобы иметь как липкий нижний колонтитул, так и полный полный артефакт # (вместо фальсификации с фоном), вы должны использовать display:table и display:table-row. Это работает, потому что, когда вы используете display:table, height:100% работает так же, как и ваш обычный min-height:100% и внутри, всегда будет растягиваться, чтобы использовать все имеющиеся вертикальные пространства.
ПРИМЕЧАНИЕ: это отличается от использования html-таблиц, поскольку в этом случае вам не нужно раздувать вашу разметку не-семантическими тегами, как вы увидите в следующем примере.
Вот пример HTML код:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 
     <div id="maincontainer" class="astable"> 
      <div id="header" class="astablerow"> 
       header 
      </div> 
      <div id="middlecontainer" class="astablerow"> 
       content 
      </div> 
      <div id="footer" class="astablerow"> 
       footer 
      </div> 
     </div> 
    </body> 
</html>

А вот CSS

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
} 
.astable{ 
    display:table; 
    height:100%; 
    table-layout:fixed; 
    width:100%; 
} 
.astablerow{ 
    display: table-row; 
} 
#header{ 
    height:30px; 
    background-color:#00ff00; 
} 
#footer{ 
    height:30px; 
    background-color:#0000ff; 
} 
#middlecontainer{ 
    background-color:#ff0000; 
}

источник

2014-06-15 11:43:26 Gufino2

Сделать контейнер div заполняет все макет с липким нижним колонтитулом

ответ

Смежные вопросы