CSS未固定在页面底部 [英] CSS is not fixed at bottom of the page

查看:47
本文介绍了CSS未固定在页面底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法将页脚固定在页面底部.当数据较大时,页脚显示在我需要放在页面底部的数据上.以下是我的代码,请告诉我我做错了.

i am not able to fix my footer at the bottom of the page.when the data is large in,the footer is showing on the data which i need to put on bottom of the page.below is my code please tell me what i am doing wrong.

<!doctype html>
<html class = "no-js" ng-app = "PreSales-Huddle" lang = "en">
<head>
    <meta charset = "utf-8">
    <title ng-bind = "title"> </title>
    <meta name = "description" content = "">
    <meta name = "viewport" content = "width = device-width">
    <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel = "stylesheet" href = "styles/main.css">

    <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
    <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<head profile = "http://www.w3.org/2005/10/profile">
    <meta name="google-signin-scope" content="profile email">

    <style>
        body {

            background-size: cover;
            background-position: top center;
        }
        .footer {
            text-align: center;
            width: inherit;
            color: #747474;
            border-top: 1px solid #e5e5e5;
            position: static;
            bottom: 0;
            margin-top: 75%;
            padding-right: 0%;
            font-family: calibri;

        }

    </style>
</head>

<body>
<div class = "container" >
    <header class = "header">

    </header>
    <div class="title" id="titleText" disabled>ABC</div>
    <main class = "main" id = "main">
        <div ng-view = ""></div>
    </main>

    <footer class = "footer" id="footer">
        <p><span style="background-color:whitesmoke">footer. </span></p>
    </footer>
</div>

推荐答案

为类 footer 内部写入位置:固定底部:0 css.

Write position: fixed, bottom: 0 for class footer inside css.

.footer {
  position: fixed;
  bottom: 0;
}

这篇关于CSS未固定在页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆