How to keep the bottom height fixed for this code snippet

Discussion in 'HTML & Website Design' started by ketting00, Feb 17, 2016.

0
  1. #1
    Here's what I'm trying to do:
    
<html>
<head>
    <style>
    body, html {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
    }
    body {
       display: -webkit-flexbox;
          display: -ms-flexbox;
                display: flex;
       -webkit-flex-direction: column;
          -ms-flex-direction: column;
             flex-direction: column;
    }
    #stage {
       width: 100%;
       height: calc(100% - 65px);
       background: #BAD;
    }
    .bottom {
       flex-shrink: 0;
       height: 50px;
       text-align: center;
    }
    </style>
</head>
<body>

    <canvas id=stage></canvas>

    <div class=bottom>
    BOTTOM BOTTOM BOTTOM
    </div>

</body>
</html>
    Code (markup):
    The bottom block is adjusting to canvas height. I want it fixed. I would change canvas height dynamically via JavaScript.

    Thanks,
     
    ketting00, Feb 17, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,280
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #2
    You mean you want to keep that block at the bottom while everything else can have a responsive height? One of the ways could be doing something like:

    
      .bottom {
        flex-shrink: 0;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -20px;
      }
    Code (markup):
    https://jsfiddle.net/Lnxj2ct8/3/ (I shrunk the #stage height to 80%).
     
    qwikad.com, Feb 17, 2016 IP
    ketting00 likes this.
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #3
    ketting00, Feb 17, 2016 IP