1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

100% height in Firefox behaves like min-height

Discussion in 'CSS' started by ketting00, Aug 27, 2016.

0
  1. #1
    Hi guys,

    I've a problem again. I've a header and a canvas I want to put together inside a device's window. Everything look great on other browsers except for, you guess, Firefox. How can I fix this?
    
<!DOCTYPE html>
<html><head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta charset="UTF-8">
    <title>100% Height</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body {
            position: relative;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-flex-direction: column;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        h1 {
            text-align: center;
        }
        h1 a {
            font-size: 1em;
        }

        #top {
            width: 100%;
        }
        canvas {
            width: 100%;
            height: 100%;
            background: #000;
        }
    </style>
</head><body>
    <div id=top>
        <h1>
            <a href="#">Site Name</a>
        </h1>
    </div>
    <canvas></canvas>
</body></html>
    Code (markup):
    Thanks in advance,
     
    ketting00, Aug 27, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    You set all child elements of body as flex containers since you made body flex, flex containers automatically adjust to the height of their parent, and you have the height of body set to 100%, and height on body is ALWAYS treated as min-height.

    Should behave that way in every other browser too.

    Given what you are setting, not really sure what it is you are trying to accomplish... Usually if you want something like aspect preservation for canvas, you have to do that in your canvas script... which is what I suspect you might be aiming for. (wild guess though).

    Pretty much, near as I can tell it's doing exactly what you told it to do... and not really made it clear what you WANT it to do.
     
    deathshadow, Aug 28, 2016 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thanks for suggestion,

    Simple put, I want a page with full screen height and a sticky footer and no scrollbar. Everything fits inside and not goes beyond the view port height, all doing without using layer stack.

    It works as expected on Chrome and other browsers (including IE 10+) but Firefox.

    I want the the header and the canvas fit together snugly in any view port.

    It can be done like this:
    
#top {
    height: 30px;
    width: 100%;
}
canvas {
    width: 100%;
    height: 100%;
    background: #000;
    height: -moz-calc(100% - 30px);
}
    Code (markup):
    But how can you calculate it in em?

    Thanks,
     
    ketting00, Aug 28, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I would NOT be trying to do that from the page side of things. You don't know how the aspect is going to screw over your canvas calculations, you likely WILL want aspect preservation -- and that ends up so much math scripting side, I would in fact size the canvas from the scripting.

    I know that goes against most of what I usually say, but CANVAS only serves a legitimate purpose when JavaScript is working, and that's what makes it the exception in my mind. (...and makes me question why the blazes it even has a tag! Has NO business in the HTML specification!!!)

    To that end, generally I don't even put CANVAS in the markup, because I don't put scripting only elements in my markup. If it only serves a purpose when JavaScript is working, IMHO it has no business in your HTML to begin with!

    ... and it's not like your scripting isn't going to have to trap window.onresize anyways... AND have to actively pull the size of the canvas element either so it knows how big an area it's working with; which may or may not also involve creating a new context should those values change.
     
    deathshadow, Aug 31, 2016 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Thanks for suggestion.

    I just thought it would be easier if I can control this with CSS. I would go the script route then.
     
    ketting00, Sep 1, 2016 IP