CODEWITHSUNDEEP
htmlcssflexbox
newbie
newbie

Reputation: 663

Footer overlapping the content when browser window is shrunk

I need to avoid the overlapping of the div's when the browser window is shrinked vertically in the following piece of code:

`

<html>
    <body>
        <style>
            #box {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #top {
                background-color: red;
                height: 560px;
                width: 400px;
            }
            #bottom {
                background-color: green;
                height: 100px;
                width: 400px;
                position: absolute;
                bottom: 0
            }
        </style>
        <div id="box">
          <div id="top">
          </div>
          <div id="bottom">
          </div>
        </div>
    <body>
</html>

`

Why are the div's getting overlapped. is there a way that this overlapping can be avoided and having the same initial structure? The bottom div acts as a footer in the real scenario. Thanks in advance!

Upvotes: 2

Views: 604

Answers (2)

Asons
Asons

Reputation: 87292

Use min-height on the box, remove absolute positioning from the bottom and both div's heights will be kept.

When the margin-top: auto is set on a flex column item, it will push it to the bottom of is parent, which you can see on bigger screens.

body {
  margin: 0;
  display: flex;                  /*  IE bug fix  */
}

#box {
  flex-grow: 1;                   /*  fill body's width  */

  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

#top {
  background-color: red;
  height: 560px;
  width: 400px;
  border: 1px solid black;
}

#bottom {
  margin-top: auto;               /*  push it to the bottom on big screen  */
  background-color: green;
  height: 100px;
  width: 400px;
  border: 1px solid black;  
}
<div id="box">
  <div id="top">
  </div>
  <div id="bottom">
  </div>
</div>

If they at some point they need to shrink, with this sample the red div does, where the height is fixed to full viewport.

It works like that, that the green is given flex-shrink: 0, which prevent it from shrink and keep its set height.

html, body {
  margin: 0;
}
#box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

#top {
  background-color: red;
  height: 560px;
  width: 400px;
  border: 1px solid black;
}

#bottom {
  margin-top: auto;
  flex-shrink: 0;
  background-color: green;
  height: 100px;
  width: 400px;
  border: 1px solid black;  
}
<div id="box">
  <div id="top">
  </div>
  <div id="bottom">
  </div>
</div>

Upvotes: 2

P.S.
P.S.

Reputation: 16394

You need to set position: relative; to parent, in this case to body element, it will solve the issue. When the parent's position is relative, and the child's position is absolute, the child will respect parent and will be positioned relatively to the parent:

body {
  position: relative;
}

#box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#top {
    background-color: red;
    height: 560px;
    width: 400px;
}
#bottom {
    background-color: green;
    height: 100px;
    width: 400px;
    position: absolute;
    bottom: 0
}
<div id="box">
  <div id="top">
  </div>
  <div id="bottom">
  </div>
</div>

Upvotes: 1

Related Questions