无法将FOOTER推送到页面底部 [英] Cannot push FOOTER to the bottom of page
问题描述
我不喜欢网页设计，我正在使用由 Adobe Dreamweaver 自动生成的网页模板。
我想把 这是 页脚上的页面看起来像 我试过这个 但是页面看起来像 img src =https://i.stack.imgur.com/vz1YW.jpgalt =enter image description here> 您可以尝试 I am not good in web-designing, I am working on a web template that was automatically generated by I want to push the This is And this is the common markup of my pages. And footer on page looks like I have tried this for But then page looks like you can try
这篇关于无法将FOOTER推送到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ footer 的 DIV 推到页面底部，即使我没有内容 .CSS （我已省略了一些）
body {
font：100％/ 1.4 Verdana，Arial，Helvetica，sans-serif;
background：＃42413C;
margin：0;
padding：0;
color：＃000;
}
.container {
width：960px;
background：#FFF;
margin：0 auto;
}
.header {
background：＃ADB96E;
}
.sidebar1 {
float：left;
width：180px;
background：#EADCAE;
padding-bottom：10px;
}
.content {
padding：10px 0;
width：780px;
float：left;
}
/ * ~~页脚~~ * /
.footer {
padding：10px 0;
background：＃CCC49F;
position：relative; / *这使得IE6 hasLayout正确清除* /
clear：both; / *这个明确的属性强制.container理解
}
< body>
< div class =container>
<？php
include（'templates / header.php'）;
include_once（'templates / sidebar.php'）;
？>
< div class =content>
<！ - end .content - >< / div>
< div class =footer>
< p>这是一个简单的页脚。< / p>
<！ - end .footer - >< / div>
<！ - end .container - >< / div>
< / body>
footer 。
bottom：0;
width：100％;
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，body {
margin：0;
padding：0;
height：100％;
}
.container {
width：960px;
margin：auto;
min-height：100％;
position：relative;
background：#FFF;
}
.header {
height：50px;
background：＃ADB96E;
}
.sidebar1 {
float：left;
width：180px;
background：#EADCAE;
padding-bottom：10px;
}
.content {
background：＃5ee;
padding：10px 0;
width：780px;
float：left;
}
.content {
padding-bottom：80px; / *页脚元素的高度* /
}
.footer {
width：100％;
height：80px;
position：absolute;
bottom：0;
left：0;
background：＃CCC49F;
}
< / style>
< / head>
< body>
< div class =container>
< div class =header>
< / div>
< div class =sidebar1>
< / div>
< div class =content>
< / div>
< div class =footer>
< p>这是一个简单的页脚。< / p>
< / div>
< / div>
< / body>
Adobe Dreamweaver.footer's DIV to the bottom of page even I have no content on the page..CSS (I have omitted some of it)body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the
}
<body>
<div class="container">
<?php
include('templates/header.php');
include_once('templates/sidebar.php');
?>
<div class="content">
<!-- end .content --></div>
<div class="footer">
<p>This is a simple footer.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
footer.position: fixed;
bottom: 0;
width: 100%;
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
width: 960px;
margin:auto;
min-height:100%;
position:relative;
background: #FFF;
}
.header {
height: 50px;
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
background:#5ee;
padding: 10px 0;
width: 780px;
float: left;
}
.content {
padding-bottom:80px; /* Height of the footer element */
}
.footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background: #CCC49F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="footer">
<p>This is a simple footer.</p>
</div>
</div>
</body>
