CODEWITHSUNDEEP
cssflexbox
user626528
user626528

Reputation: 14417

flex alignment incorrect result

I'm trying to align a line of text to the bottom of the screen with this code. 

body,
html {
  height: 100%;
}

div.BottomAligned {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
<div id="Main" style="min-height: 100%;">
  <div>
    Line1<br> Line2
  </div>
  <div id="Bottom" class="BottomAligned">
    TextBottom
  </div>
</div>

However, the "TextBottom" text is shown below the visible portion of the screen, so the height of the Main div is actually bigger than 100% of the window size. Any ideas how to fix this?

Upvotes: 1

Views: 48

Answers (2)

Temani Afif
Temani Afif

Reputation: 273989

Maybe something like this:

body,
html {
  height: 100%;
}
body {
  margin:0; /* Don't forget to remove default margin */
}
#Main {
  display: flex; /* Main should be the flex container */
  flex-direction:column;
}

div.BottomAligned {
  margin-top:auto; /* Push items to bottom */
  text-align:center;
}
<div id="Main" style="min-height: 100%;">
  <div>
    Line1<br> Line2
  </div>
  <div id="Bottom" class="BottomAligned">
    TextBottom
  </div>
</div>

Upvotes: 2

ninjazaman
ninjazaman

Reputation: 71

In case you don't want to use flexbox, you can just replace the CSS with the below:

body,
html {
  margin: 0;
  padding: 0;
}

div.BottomAligned {
  width: 100%;
  display: block;
  position:absolute;
  bottom:0;
  left:0;
}

#Main {
  position: relative;
  height:100vh;
}

Upvotes: 0

Related Questions