我的网站上有一个页脚标签,由于某种原因,它在大量移动设备上不可见,或部分不可见。 (我通过使用浏览器的开发人员工具知道这一点),它可以被拉入查看,但它不会留在视野中,它会再次被拉下。
我实现的 CSS 可能会导致这种情况,但我需要它以使页脚在所有情况下都位于页面底部。 (如 this question 中所述)
这基本上是我的页脚的代码:
html {
height: 100%;
}
main {
padding-right: 200px;
padding-left: 200px;
background-color: white;
flex: 1 0;
}
body {
background-color: #80cbc4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
text-align: center;
background-color: #d9efef;
height: auto;
flex: 0 0;
}
<html>
<body>
<main>
page content
</main>
<footer>
<p style="direction:rtl;">
רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
</p>
</footer>
</body>
</html>
这个问题发生在这些设备上(正如我浏览器的开发者工具所模拟的那样):
而不是其他(例如桌面),这意味着上面的代码可能不会向其他用户显示问题。
笔记:
我一直在检查我的开发工具中的所有选项,这意味着我在上面的列表中还包含了一些不常见的设备。
还,
Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey
这意味着这可能只发生在我的模拟器中。
这是问题的样子:
如何让我的页脚重新进入以在所有设备上查看?
最佳答案
这应该有帮助:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
如果没有,它可能只是在视野之外。将页脚样式设置为始终可见,但仍位于最底部:footer {
bottom: 0;
}
关于html - 在 Microsoft Edge 开发人员工具中看不到页脚(仅限某些设备),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67659712/