CODEWITHSUNDEEP
htmlcss
Raman Balyan
Raman Balyan

Reputation: 1063

How to auto adjust the height of fixed footer at bottom

I want to achieve the desired result as mentioned in the uploaded picture. Here is the explanation of both the views:

I always want the margin between the area A and area C as 20px. If the screen size changes, area C should fill up the gap (as shown in View 2) keeping the margin always 20px between area A and area C. Currently, whenever screen size changes the gap between area A and area C increase or decrease which I don't want rather it should be filled by area C.

index.html

<!DOCTYPE html>
  <html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Learn</title>
    <link href = "styles.css" rel = "stylesheet">
  </head>

  <body>
    <div style="text-align:center;">
      <div class="boxA">
        <h2>A</h2>
        <div class="boxD"><h2>D</h2></div>
        <div class="boxD"><h2>D</h2></div> 
      </div>
      <div class="boxB">
        <h2>B</h2>
      </div>
      <div class="boxC">
        <h2>C</h2>
      </div>
    </div>
  </body>
</html>

styles.css

html, body {
  margin:0;
  padding:0;
  width:100%; 
  height:100%;
}
body, h2{
  margin: 0;
}

.boxA{
  width: 500px;
  height: 580px;
  background-color: #006400;
  margin-top: 20px;
  margin-right: 20px;
  display: inline-block;
  margin-bottom: 0px;
}

.boxB{
  width: 300px;
  height: 350px;
  background-color: blue;
  display: inline-block;
}

.boxC{
  width: 100%;
  background-color: yellow;
  margin-top: 20px;
  position:absolute;
  bottom: 0px;
}

.boxD{
  width:220px;
  display: inline-block;
  background-color: red;
  margin-left:20px;
  float:left;
}

Note: I want to achieve this just by CSS. No Javascript.

enter image description here

Upvotes: 1

Views: 4209

Answers (1)

Roy
Roy

Reputation: 8069

The flexbox property comes in handy here. Read more about it at Mozilla Developer Network or at CSS-Tricks.

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

I reproduced the images you provided and set the ratio of the content versus the footer to 4:1 (or 80% to 20% in values). Please take a look at the code below and be sure to check out the full screen version to see it working properly, or check this JSFiddle. You can change the values to your needs, but the main part is this:

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
}

It gets repeated in various child element to fit the needs.

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
}

.container {
  display: flex;
  flex-flow: row wrap;
  height: 80%;
  width: 100%;
  background: lightgray;
}

.green {
  display: flex;
  flex-flow: row wrap;
  margin: 20px;
  width: 60%;
  background: lightgreen;
}

.box {
  width: calc(50% - 50px);
  margin: 20px;
  background: darkgreen;
  box-sizing: border-box;
}

.blue {
  margin: 20px;
  width: 30%;
  max-height: 50%;
  background: blue;
}

.footer {
  height: 20%;
  background: lightblue;
}
<div class="wrapper">

  <div class="container">

    <div class="green">
      a
      <div class="box">d</div>
      <div class="box">d</div>
    </div>
    
    <div class="blue">
    b
    </div>

  </div>
  <div class="footer">
    c
  </div>

</div>

Upvotes: 1

Related Questions