Question

我有一个使用flexbox制作的粘性页脚的问题。它适用于高达1366 * 768的分辨率，但在1600 * 1300像素上，尽管内容很少，但页脚仍会被推到可见屏幕的底部。

这是我正在使用的html结构。

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/assets/images/DublinPortCo.jpg);"></div>
                            </div>
                        </div>
                        <canvas class="DVSL-canvas" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 1127px; height: 500px;" width="1127" height="500"></canvas>
                        <div class="DVSL-border" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></div>
                        <div class="DVSL-interaction" tabindex="0" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;">
                            <div class="DVSL-resizer" style="width: 1127px; left: 0px;"></div>
                            <div class="DVSL-info-left" style="position: absolute; display: none; left: 752px; top: 256px;"><b>Owl</b></div>
                        </div>
                        <div class="DVSL-menu-container DVSL-menu-workaround" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;"><span class="DVSL-empty"> </span></div>
                    </div>
                </div>
            </div>
            <div class="ui inverted vertical footer segment">
                <div class="ui container">
                    <div class="ui grid">
                        <div class="twelve wide column">Thermtec 2016. All Rights Reserved</div>
                        <div class="three wide column"><img src="/assets/images/logoenigma.png" class="image ui small"></div>
                    </div>
                </div>
            </div>
        </div>    
    </body>

该网站在http://86.47.106.22:8080/

处可见

Answer 1

您的标题（ui secondary pointing menu）占用了一些空间，而#main div是视口的100％，因此变为[标题高度] + [视口高度] =按下页脚

您可以尝试将标题的10％视图和视口的90％设置为确保一致性

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

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

更大屏幕尺寸上的Flexbox粘性页脚高度问题

1 个答案: