Bazinga777 February 2016

Flexbox sticky footer height issue on larger screen sizes

I have an issue with a sticky footer made with flexbox. It works well on resolutions upto 1366*768 but on 1600*1300 pixels the footer gets pushed to the bottom of the visible screen despite there being very little content.

enter image description here

Here is the html structure that I am using.

body , html {
    height: 100%;
}

#main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content {
    flex: 1;
}





<body>
        <div class="ui secondary pointing menu">
            <a class="active item"><img src="/assets/images/ti.jpg" class="image ui small"></a>
            <div class="right menu"><a class="ui item">Logout</a></div>
        </div>
        <div id="main">
            <div id="content" class="ui container">
                <div id="pie-menu" style="position: relative;">
                    <div class="DVSL-resize-triggers">
                        <div class="DVSL-expand-trigger">
                            <div style="width: 1128px; height: 501px;"></div>
                        </div>
                        <div class="DVSL-contract-trigger"></div>
                    </div>
                    <!--ZoomCharts 1.11.7-->
                    <div>
                        <div class="DVSL-background-container" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
                            <div class="DVSL-background" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
                                <div class="DVSL-background-image DVSL-PC-background-image" style="bottom: 0px; top: 92px; left: 405px; width: 317px; height: 317px; background-image: url(http://86.47.106.22:8080/ass        

Answers


Aziz February 2016

Your header (ui secondary pointing menu) is taking some space while the #main div is 100% of viewport so that becomes [header height] + [viewport height] = footer pushed down

You can try to make the header 10% of viewport and content 90% of viewport to ensure consistency

.ui.secondary.menu {
    ...
    height: 10%;
    box-sizing: border-box;
    margin-bottom: 0;
}

#main {
    display: flex;
    flex-direction: column;
    height: 90%;
}

Post Status

Asked in February 2016
Viewed 2,545 times
Voted 12
Answered 1 times

Search




Leave an answer