2

I am trying to make the flexbox-container work on percentage height but it is not working. However, it behaves correctly on pixel height.

My body is divided into upper and lower. Upper should consist of 70% height and lower should have 30%. Upper is working correctly but lower is not. Background color does not automatically takes 30% height.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("../photo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -300px;
  background-attachment: fixed;
}

#upper-body {
  height: 70%;
}

#body-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#fullheight {
  height: 100%;
}

#lower-body {
  height: 30%;
}

#lower-first-block {
  height: 30%;
}
<section id="upper-body">
  <div class="dark-overlay">
    <div class="container-fluid" id="fullheight">
      <div class="row" id="fullheight">
        <div class="col-md-3" id="fullheight">
          <div id="body-left">
            <div id="header-text">
              <h1>Web<span id="head-text-color">|App</span></h1>
            </div>
            <div id="button">
              <!--This appears at down-->
              <h1>Button</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="lower-body">
  <div class="row" id="full-height">
    <div class="col-md-6 blue-background" id="full-height">
      <div id="lower-first-block">

      </div>
    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
    <div class="col-md-2 blue-background" id="full-height">

    </div>
  </div>
</section>

Here's my desired layout:

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sadikshya Luintel
  • 53
  • 4
  • Regarding your edit: note that an [element's ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) must be unique (i.e. not repeated in a page). I suggest using a class for `.full-height` instead of an ID. What is the intent for the lower section? It seems it should be 30% of the page height. Should each of it's children be 100% of that 30%? Maybe a diagram would help describe what you are aiming for. – showdev Dec 27 '17 at 18:33
  • 1
    @showdev thanks I will change that right now. Well, upper section shall have cover 70% height and lower section 30%. https://i.pinimg.com/736x/a5/95/4b/a5954be8d9d90499d9645151cbfbb79c--design-ui-flat-design.jpg. I am trying to achieve something like this. yes you are right lower shall have 30% and children shall be 100 of that 30 or lets say 30 in whole – Sadikshya Luintel Dec 27 '17 at 18:34
  • Also, are you using Boostrap's CSS? – showdev Dec 27 '17 at 18:36
  • @showdev yup. I am using – Sadikshya Luintel Dec 27 '17 at 18:36
  • Since you're are using Bootstrap, I suggest using [Bootstrap's flexbox classes](https://v4-alpha.getbootstrap.com/utilities/flexbox/). I'm no expert in Bootstrap CSS, but it seems like the most efficient way to go. – showdev Dec 27 '17 at 18:45

0 Answers0