问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue网站布局footer的问题

头像
李冰
    17765375

    最近用vue写一个介绍官方!

    但是有的页面里面就一点点东西

    有的页面有很多

    footer组件在页面内容多的时候没问题!
    但是在内容少的时候就堆积到屏幕中间了 除了给Main组件加min-height之外有什么办法解决这个问题???

    <el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>
    vue.jsjavascriptcss3element-ui
    阅读 5.4k
    3 个回答
    得票最新
    头像
    文博
      3.3k1615
      ✓ 已被采纳

      楼主，你好！还可以利用绝对定位来做。示例：

      <style>
    html, body{
      height: 100%;
    }
    .footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 50px;
      background: #000;
    }
  </style>

<body>
<div class="footer"></div>
</body>

      如有帮助，麻烦点击下采纳，谢谢~

      头像
      dailyvuejs
        1.6k12

        这种就是 css 功力了，可以看看：http://www.w3school.com.cn/cs...

        除了楼上说的这个 absolute，如果你想一直滚动跟随，可以用 fixed

        头像
        布列瑟农的星空
          1.4k21127

          flex 布局

          <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html, body {
                margin: 0;
                height: 100%;
            }
            .wraper {
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .header {
                height: 60px;
                background-color: aqua;
            }
            .content {
                flex: 1;
                background-color: blanchedalmond;
            }
            .footer {
                height: 200px;
                background-color: rosybrown;
            }
        </style>
    </head>
    <body>
        <div class="wraper">
            <div class="header">header</div>
            <div class="content">content</div>
            <div class="footer">footer</div>
        </div>
    </body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题