html - vuejs:移动和显示视图中的粘性页脚
问题描述
如何在桌面和移动视图上创建粘性页脚?以下代码与主要内容重叠。在页脚中设置时,position: relative;
它不会重叠,但也不会粘在底部。我需要一个响应式的解决方案。
应用程序.vue:
<template>
<div id="app">
<NavbarComponent/>
<router-view/>
<FooterComponent/>
</div>
</template>
<script>
import NavbarComponent from "./components/Navbar"
import FooterComponent from "./components/FooterComponent"
export default {
name: "App",
components: {
NavbarComponent,
FooterComponent
}
}
</script>
<style>
body {
min-height: 100vh;
position: relative;
margin: 0;
}
</style>
页脚组件.vue:
<template>
<footer>
<p class="text-center">Some random text for the footer.</p>
</footer>
</template>
<script></script>
<style scoped>
footer {
color: white;
background-color: #003459;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 50px;
}
</style>
解决方案
我们有很多方法可以将页脚粘在底部。您可以尝试使用 flex。
<body>
<div class='container'></div>
<div class='footer'></div>
</body>
<style>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
flex: 1; //or 1 0 auto
}
.footer {
flex-shrink: 0;
}
</style>
非常干净和快速。或者你可以尝试降低高度...
.container {
min-height: calc(100vh - 80px);
}
.footer {
height: 60px;
}
推荐阅读
- android - 向 BottomSheetDialogFragment 添加边距
- java - JSoup - 仅提取标题和价格
- javascript - 错误 - 使用 vue-i18n 插件“找不到模块 ./en.json”
- google-apps-script - 使用 UrlFetchApp 进行授权
- c# - 调用 Activator.CreateInstance() 实例方法的类型安全方式?
- python - Ujson 适用于 MacOS,但不适用于 Ubuntu
- html - 如何删除日文字符下方的空格?
- python-3.x - 如何在指定块中强制使用 sha256 哈希
- python - (Python)从嵌套字典中的特定键中查找值总和的函数
- arrays - Laravel orderBy 未按正确顺序对数据进行排序