Question

我无法在页面底部修复我的页脚。当数据很大时，页脚会显示我需要放在页面底部的数据。下面是我的代码请告诉我我做错了什么。

<!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>

Answer 1

在css中为position: fixed类写bottom: 0，footer。

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

Answer 2

<!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>
    <meta name="google-signin-scope" content="profile email">

    <style>
        body {
            background-size: cover;
            background-position: top center;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            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>

我清理了你的HTML并将其添加到你的CSS中：

position: fixed;
bottom: 0;
width: 100%;

Answer 3

footer {
  position: absolute;
  bottom: 0;
}

CSS没有固定在页面底部

3 个答案: