How to make the flex box cover the entire page as required?-CodePudding

I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window ,in around 1200px width, the flex box container is not going all the way down (I am fine with the buttons coming as a column when viewing on a small screen , as already happening.) Please suggest some changes. what I want to happen

body {
  background-color: #06283D;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.heading {
  color: #1894E7;
  display: flex;
  justify-content: center;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  margin: 5%;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #256D85;
  justify-content: space-around;
  font-family: 'Montserrat', sans-serif;
  color: #06283D;
  position: relative;
  left: 0;
  right: 0;
  }

.flex-container>button {
  background-color: #DFF6FF;
  width: 350px;
  margin: 6%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
  transition-duration:0.3s;

}
.flex-container>button:hover {
  transform: translateY(-5px);
  transition-duration:0.3s;
  box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1086px){
  .flex-container>button{
    margin: 7%;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Papers</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="public/css/styles.css">
  </head>
  <body>
    <div >
      <h1>Loren ipsum</h1>
    </div>
    <hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">


      <div >
        <button>1Year</button>
        <button>2Year</button>
        <button>3Year</button>
        <button>4Year</button>
      </div>

  </body>
</html>

CodePudding user response：

If you make the styling of the flex-container:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #256D85;
    justify-content: space-around;
    font-family: 'Montserrat', sans-serif;
    color: #06283D;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

Then it will certainly cover the whole page.

CodePudding user response：

I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.

Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.

A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/

Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.

body {
  background-color: #06283D;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.heading {
  color: #1894E7;
  display: flex;
  justify-content: center;

}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  margin: 5%;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #256D85;
  justify-content: space-around;
  font-family: 'Montserrat', sans-serif;
  color: #06283D;
  height: 100vh; /* here's the change*/
}

.flex-container>button {
  background-color: #DFF6FF;
  width: 350px;
  margin: 6%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
  transition-duration: 0.3s;

}

.flex-container>button:hover {
  transform: translateY(-5px);
  transition-duration: 0.3s;
  box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1086px) {
  .flex-container>button {
    margin: 7%;
  }
}

<div >
    <h1>Hello World!</h1>
</div>
<div >
    <button>Click Me!</button>
    <button>Click Me!</button>
    <button>Click Me!</button>
    <button>Click Me!</button>
</div>

https://jsfiddle.net/slingtruchoice/56e0sj4k/