宽度自适应的问题？

Question

单页面应用里，想让footer固定在底部，用的postion，然而如果文章内容超出一屏，footer就会定位在一屏的地方。如果不写html 100%的宽度，其他不足一屏的页面定位就不在页面底部了，有什么解决的方案吗？

数据分析师 · Answer

Wide adaptive problem? -PHP Chinese website Q&A-Wide adaptive problem? -PHP Chinese website Q&A

Let’s take a look and learn.

迷茫 · Answer

<pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        div {
            position: relative;
            min-height: 100%;
        }
        footer {
            position: absolute;
            bottom: 0px;
            background: grey;
            width: 100%;
            height: 50px;
        }
        p {
            height: 2000px;
        }
    </style>
</head>
<body>
<div>
    <p></p>
    <footer>123</footer>
</div>
</body>
</html></pre>

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial