Twitter Bootstrap Question posted in

Full height columns beneath a Bootstrap header-Twitter bootstrap

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    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!


  2. 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?

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search