Height not 100% on Container Fluid even though html and body are

Height not 100% on Container Fluid even though html and body are

Asked on January 4, 2019 in Meteor.
Add Comment


  • 1 Answer(s)

    Here is the answer:

    html, body {
      height: 100%;
    }
    .fill-height {
      min-height: 100%;
      height:auto !important; /* cross-browser */
      height: 100%; /* cross-browser */
    }
    

    The faults in the setting min-height: 100% on the body, is that height: 100% on the child div not actually have a proper parent height to prefer, and not work.

    Modification:

    In this idea applies to all child divs. The body-film div is a child of container-fluid. Because container-fluid now has a min-height of 100%, and not a defined height it is set to auto, Give a height percentage to body-film, it not have a height to reference. It’s having a read of MDN – CSS height and MDN – CSS min-height.

    html, body {
      height: 100%;
    }
    .container-fluid {
      height: 100%;
      overflow-y: hidden; /* don't show content that exceeds my height */
    }
    .body-film {
      min-height: 100%;
      overflow-y: scroll;
    }
    
    Answered on January 4, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.