0

I'm having difficulty getting full height columns to site beneath a Bootstrap header. They work in Chrome but not IE or Edge (I haven't tried any others yet).

I followed the strategy in this SO answer:

Twitter bootstrap 3 two columns full height

You can see my version here:

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

IE and Edge seem just ignore the negative top margin. Any ideas?

littlecharva
  • 4,224
  • 8
  • 45
  • 52

3 Answers3

0
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%;
}

This works in IE and Edge is there a specific reason you needed that styling?

I am Cavic
  • 1,115
  • 1
  • 10
  • 22
  • It does, but then the page is at 100% + 51px - caused by the height of the header. By adding the negative margin and the padding, it should sit behind the header, which it does in Chrome, and does in the linked answer, but doesn't in my code in Edge or IE. – littlecharva Sep 20 '18 at 09:16
0
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%;

}

remove the padding and the margin and your page looks fine with all the browsers

this is yash
  • 533
  • 1
  • 3
  • 15
  • you must have missed answer I have posted 10 min ago? – I am Cavic Sep 20 '18 at 09:08
  • It does, but then the page is at 100% + 51px - caused by the height of the header. By adding the negative margin and the padding, it should sit behind the header, which it does in Chrome, and does in the linked answer, but doesn't in my code in Edge or IE. – littlecharva Sep 20 '18 at 09:16
  • Oops!! i haven't seen that you had answered it . @IamCavic – this is yash Sep 20 '18 at 09:39
0

Turns out I needed to apply display:table to the .container element in the header too. The answer that I linked to applied it to ALL .container items, which I felt was unnecessarily broad - turns out I was wrong!

littlecharva
  • 4,224
  • 8
  • 45
  • 52