Question

我正在创建一个包含从mysql数据库中提取数据的表的网页。当我想添加页脚时，页脚底部不会显示页脚。我已经尝试过html的常规页脚类，bootstrap页脚，粘性页脚，但它们都没有奏效。我还尝试了所有position个值。即使我在代码底部写了随机的东西，在正文结束标记之前，它仍然在开头显示它。

您可以看到以下页面：http://sagtekin.com/letseat/donat.php

非常感谢你的帮助。

编辑：代码如下：

    <!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=iso-8859-9" http-equiv="content-type">
<meta content="text/html;charset=windows-1254" http-equiv="content-type">
<meta content="text/html;charset=x-mac-turkish" http-equiv="content-type">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<title>Let's Eat - Donatello Pizza</title>
<style>
body {
    background: url(background/bg-03.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}
#infoCard {
    background: #FAFAFA;
    margin-top: 100px;
}
#header {
    position: fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
    -moz-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
    -webkit-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
}
div {
    border-radius: 5px;
}
</style>
</head>

<body>

<header id="header" class="w3-container w3-teal">
    <h1><b>LET'S EAT</b></h1>
</header>
<div class="w3-responsive">
    <div class="w3-third  w3-container">
    </div>
    <div class="w3-third w3-container">
        <div id="infoCard" class="w3-card-16">
            <header class="w3-container w3-teal">
                <h1>Donatello Pizza</h1>
            </header>
            <p style="color: #4CAF50; text-align: center; margin-top: 10px; font-size: large; vertical-align: middle;">
            <b>OPEN</b></p>
            <hr />
            <div>
                <p id="textDisplay" style="text-align: center">Hover your mouse 
                over the buttons.</p>
            </div>
            <hr />
            <div class="btn-group btn-group-justified">
                <a class="btn btn-primary" href="tel:05338643695" onmouseout="resetText()" onmouseover="changeTextTurkcell()">
                Turkcell</a>
                <a class="btn btn-primary" href="tel:05488643695" onmouseout="resetText()" onmouseover="changeTextTelsim()">
                Telsim</a>
                <a class="btn btn-primary" href="tel:03927147083" onmouseout="resetText()" onmouseover="changeTextLandLine()">
                Landline</a>
                <script>

                        function changeTextTurkcell()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0533 864 3695</b>";
                        }

                        function changeTextTelsim()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0548 864 3695</b>";
                        }

                        function changeTextLandLine()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0392 714 7083</b>";
                        }

                        function resetText()
                        {
                            document.getElementById("textDisplay").innerHTML="Hover your mouse over the buttons.";
                        }

                      </script>
            </div>
        </div>
    </div>
    <div class="w3-third w3-container">
    </div>
</div>
<div class="w3-quarter w3-container">
</div>
<div class="w3-half w3-container">
    <div class="w3-responsive w3-card-16" style="margin-top: 50px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Breakfast</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Pizzas</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Chicken</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Pasta</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Other</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-quarter w3-container">
    </div>
</div>
<!--<div class="w3-container w3-teal" style="position:absolute;  bottom:0px;">
    <h5>LET'S EAT</h5>
    <p>&copy; 2015 Poyraz Sagtekin.</p>
    </div>-->ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr

</body>

</html>

Answer 1

我隔离了我认为是你的页脚代码，它是一串字母，如：

ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr

我将它包含在具有以下样式的div中，它出现在页面底部：

<div style="clear:both;">
    ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</div>

看来你只需要clear你以前的元素来强迫＆＃34;你的页脚到页面底部。

Answer 2

扩展到@Samuels答案，您必须将其放在<div>或<footer>标记中，然后只需使用clear: both;设置样式，或者您可以添加更多内容，如position: fixed; 1}} bottom: 0; line-height: 15px;列表可以继续下去。

页脚末尾没有显示页脚

2 个答案: