CODEWITHSUNDEEP
htmlcss
Mentalhead
Mentalhead

Reputation: 1505

Height:100% to match the height of the browser

I have the following code:

HTML:

<html>
  <body>
    <div>
      <section></section>
      <section>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </section>
    </div>
  </body>
</html>

CSS:

html, body {
  height: 100%;
}

div {
  display: flex;
  height: 100%;
  align-items: stretch;
}

div > section:first-of-type {
  width: 400px;
  height: 100%;
  background: #0f0;
}
div > section:last-of-type {
  height: 100%;
  background: #f00;
  width: 200px;
}

Basically I need the green section and red section to have the same height. At the moment, the red section doesn't expand with my content same as the green section.

I've added height:100% to both sections, html and body, but I get the following results: http://jsfiddle.net/cs8f65wp/

As you can see, background is "cut" after the scroll on both sections, so my guess that height:100% is causing this problem.

Is there a way to fix this with HTML/CSS (without JavaScript) and why am I having this issue?

Upvotes: 1

Views: 63

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272006

Use min-height instead of height on flex container. That way it will stretch up to body or content height, whichever is taller. There is no need to set height on flex content.

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
div {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}
div > section:first-of-type {
  width: 400px;
  background: #0f0;
}
div > section:last-of-type {
  width: 200px;
  background: #f00;
}
<div>
  <section></section>
  <section>
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </section>
</div>

Upvotes: 2

Related Questions