前端:页面内容不够,始终把footer固定在底部

绝对定位


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内容不够,始终把footer固定在底部title>
    <style>
        html, body {
            height:100%;
            min-height: 100%;
            position: relative;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #f00;
        }

        .main-content {
            background-color: #0f0;
            padding-bottom: 100px;/*padding-bottom要等于或大于footer的height值*/
        }

        footer {
            position: absolute;
            bottom: 0;
            height: 100px;
            background-color: #00f;
            width:100%;
        }
    style>
head>
<body>
<header>headerheader>
<div class="main-content">contentdiv>
<footer>footerfooter>
body>
html>

margin负值


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内容不够,始终把footer固定在底部title>
    <style>
        html,body{
            height:100%;
            margin:0;
            padding:0;
        }
        .top{
            min-height:100%;
        }
        header{
            background-color: #f00;
        }
        .main-content{
            padding-bottom:100px;/*padding-bottom要等于或大于footer的height值*/
        background-color: #0f0;
        }
        footer{
            height:100px;
            margin-top: -100px;
            background-color: #00f;
        }
    style>
head>
<body>
<div class="top">
    <header>headerheader>
    <div class="main-content">contentdiv>
div>
<footer>footerfooter>
body>
html>

注:以上两种方法要求footer高度固定。

你可能感兴趣的:(前端:页面内容不够,始终把footer固定在底部)