Столбцы полной высоты под заголовком Bootstrap

Question

У меня проблемы с получением колонок полной высоты для сайта под заголовком Bootstrap.Они работают в Chrome, но не в IE или Edge (я еще не пробовал)высота

Вы можете увидеть мою версию здесь:

http://www.anthonyburns.co.uk/Examples/TestFullCols.html

IE и Edge, похоже, просто игнорируют отрицательное верхнее поле.Есть идеи?

Answer 1

div#main-container {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*remove the below margin and padding styling and your page looks well in all the browsers*/
    /*margin-top: -51px;*/
    /*padding-top: 51px;*/
    height: 100%;

}

Удалите отступы и поля, и ваша страница выглядит хорошо во всех браузерах

Answer 2

Оказывается, мне нужно было применить display: table и к элементу .container в заголовке.Ответ, с которым я связался, применил его ко ВСЕМ элементам .container, который, по моему мнению, был излишне широк - оказывается, я ошибался!

Answer 3

div#main-container {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* margin-top: -51px; */
    /* padding-top: 51px; */
    height: 100%;
}

Это работает в IE и Edge, есть ли конкретная причина, по которой вам нужен этот стиль?