CODEWITHSUNDEEP
csshtml
Evgenii
Evgenii

Reputation: 409

how to fixed the footer when content is aligned vertically

I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container text-align: center; height: calc(100% - header - footer ))

enter image description here

but when the user is changing size

for the window the footer is also change his position but should not do it enter image description here

Js fiddle https://jsfiddle.net/hm97o1sa/

is there any way to fix it without "flex" ?

updated: expected behavior

scrolled to the top enter image description here

scrolled to the bottom enter image description here

Upvotes: 0

Views: 231

Answers (3)

Vlad Bîcu
Vlad Bîcu

Reputation: 1358

A quick fix is to apply a min-height: 250px on your #content

#content {
    height: calc(100% - 150px);
    min-height: 250px;
    text-align: center;
}

Upvotes: 0

GibboK
GibboK

Reputation: 73918

A possible solution would be to use calc together with Viewport units vh.

With calc(), you can perform calculations to determine CSS property values.

With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    #header {
      height: 100px;
      background: blue;
    }
    
    #content {
      height: calc(100vh - 150px);
      min-height: 250px;
      text-align: center;
    }
    
    #vert-align {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    
    #item_1 {
      background: yellow;
      height: 250px;
      width: 250px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 50px;
    }
    
    #item_2 {
      background: red;
      height: 250px;
      width: 250px;
      display: inline-block;
      vertical-align: middle;
    }
    
    #footer {
      height: 50px;
      background: green;
    }
<div id="header">HEADER</div>
<div id="content">
  <div id="vert-align"></div>
  <div id="item_1"></div>
  <div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>

Upvotes: 1

Akash Ryan
Akash Ryan

Reputation: 341

Modify your CSS and your Final code will be:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#header {
    height: 100px;
    background: blue;
}
#content {
   height: calc(100% - 150px);
   text-align: center;
   overflow-y: auto;
}
#vert-align {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#item_1 {
    background: yellow;
    height: 250px;
    width: 250px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 50px;
}
#item_2 {
    background: red;
    height: 250px;
    width: 250px;
    display: inline-block;
    vertical-align: middle;
}
#footer {
    height: 50px;
    background: green;
}
<!DOCTYPE html>
<html>
  <head>
    <title>TA</title>
  </head>
  <body>
    <div id="header">HEADER</div>
    <div id="content">
      <div id="vert-align"></div>
      <div id="item_1"></div>
      <div id="item_2"></div>
    </div>
    <div id="footer">FOOTER</div>
  </body>
</html>

Upvotes: 0

Related Questions