Question

我希望在不使用position属性的情况下将页脚粘贴到页面底部，最好不使用margin，height等，因为这并不是适用于所有屏幕尺寸。我也想避免使用＆＃34;顶部，中部和底部＆＃34; div设置。我只想在页面底部粘贴一个页脚，无论页面大小或尺寸如何。

我尝试使用div但是我在整个div页脚周围得到了空白区域，因为<body>有些外围有填充物;同样的事情使用<footer>元素：

white spaces

＆＃13;

html,body{
    font-family:Verdana,sans-serif;
    font-size:15px;
    line-height:1.5;
}

.THG-center{
    text-align: center;
}

.THG-hover-blue:hover {
    color: #2196F3;
}

footer{
    background: #E0E0E0;
    width: 100%;
    padding: 1px;
    bottom: 0px;
    left: 0px;
}

＆＃13;

<footer class="THG-center">
  <p>Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
  <p>
    <a class="THG-hover-blue" href="#">Terms of Use</a>
    <a class="THG-hover-blue" href="#">Privacy Policy</a>
    <a class="THG-hover-blue" href="#">FAQ</a>
  </p>
</footer>

＆＃13;

Answer 1

~~您需要添加：~~

~~footer { position: fixed; }~~

根据您的说明进行编辑：

您的问题不是关于页脚，而是浏览器的正文边距。要删除它：

body { margin: 0; }

Answer 2

只需使用div和div的流程。没有CSS或任何东西。通过覆盖其简单集来摆脱浏览器默认边距。

   <style>
body {
    display: block;
    margin: 0px;
}
</style

    <div>my page</div>
    <div><footer>my footer</footer></div>

FWIW浏览器有默认值

body {
    display: block;
    margin: 8px;
}

Answer 3

您可以使用flexbox：

＆＃13;

html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  height: 100%;
}

.THG-center {
  text-align: center;
}

.THG-hover-blue:hover {
  color: #2196F3;
}

footer {
  background: #E0E0E0;
  width: 100%;
  padding: 1px;
  bottom: 0px;
  left: 0px;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

＆＃13;

<footer class="THG-center">
  <p>Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
  <p>
    <a class="THG-hover-blue" href="#">Terms of Use</a>
    <a class="THG-hover-blue" href="#">Privacy Policy</a>
    <a class="THG-hover-blue" href="#">FAQ</a>
  </p>
</footer>

＆＃13;

Answer 4

检查我对页脚css的修改。希望这会有所帮助。

html,body{
        	font-family:Verdana,sans-serif;
        	font-size:15px;
        	line-height:1.5;
        }

    .THG-center{
    	text-align: center;
    }

    .THG-hover-blue:hover {
    	color: #2196F3;
    }

    footer{
    	background: #E0E0E0;
      margin-right:auto;
      margin-left:auto;
      padding-right:15px;
      padding-left:15px;
      width:100%
    }

<footer class="THG-center">
    <p>Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
    <p>
    <a class="THG-hover-blue" href="#">Terms of Use</a>
    <a class="THG-hover-blue" href="#">Privacy Policy</a>
    <a class="THG-hover-blue" href="#">FAQ</a>
    </p>
    </footer>

Answer 5

这对你有用。我复制了您的代码并应用了我在此引用的解决方案：How do you get the footer to stay at the bottom of a Web page?

<!DOCTYPE html>
<html>
<head>
    <title>NumerValidation</title>
</head>
<body>
        <form name="myform" id="myform" action="" onsubmit="return validateForm();" method="post">
        <table cellspacing="2" cellpadding="2" border="0">
        <tr>
                <td align="right">Zip</td>
                <td><input type="text" name="zip" maxlength="15" size="28"/></td>
            </tr>
            <tr>
                <td align="right">Telephone number</td>
                <td><input type="text" name="phone" size="28" placeholder="(555) 555-5555"/></td>
            </tr>
            <tr>
                <td align="right"> EMail </td>
                <td> <input type="text" name="email" size="28" /></td>
            </tr>
<tr>
                <td align="right"></td>
                <td><input type="submit" value="Submit"/> </td>
            </tr>
        </table>    
    </form>
<script>

         function validateForm() {

            var zip = document.myform.zip;
            var email = document.myform.email;
            var phone = document.myform.phone; 

            if (email.value == "")
            {
                window.alert("Please enter email Address.");
                email.focus();
                return false;
            }   

            var regEx2 = /^[0-9]{5}(?:-[0-9]{4})?$/;

            if(!zip.value.match(regEx2))
            {
                window.alert( "Please provide a zip in the ##### or #####-#### format." );
                zip.focus() ;
                return false;
            }  

            var regEx = /^(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}$/;

            if(!phone.value.match(regEx)) 
            {  
                window.alert("Please enter Telephone number in (xxx) xxx-xxxx format.");
                phone.focus();
                return false;
            }  

            return true;
         } 

        </script>

</body>
</html>

html,body {
    font-family:Verdana,sans-serif;
    font-size:15px;
    line-height:1.5;
    margin:0;
    padding:0;
    height:100%;
}

.THG-center{
	text-align: center;
}

.THG-hover-blue:hover {
	color: #2196F3;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}
footer,.push {
    height:142px;
}

footer{
	background: #E0E0E0;
	width: 100%;
	padding: 1px;
    box-sizing:border-box;
}

如何在不使用任何以前已知的制作页脚的方法的情况下制作页脚？

5 个答案: