Question

当内容比视口较短时，我试图将页脚div保留在屏幕底部，但它也必须保留在页面内容的底部（不是当内容高于视口时，查看端口。

到目前为止，它在放大时仍保留在内容的底部，但在缩小时我无法坚持到底部。有位置的样本：绝对;我已经看到了，但它使页脚保持在视图端口的底部而不是放大时的内容。

我必须为学校单位做这个，有没有办法做到这一点？

现在我的页脚位置是相对的，虽然我猜这不会做任何事情，但坚持靠近最后一个div，是吗？但我似乎找到了我需要做的事情。

这是网站： http://www.foodforthought.webatu.com/Index.html当您向右缩放时，您会看到页脚没有停留在底部。

这是我的CSS：

* { padding: 0; margin: 0; font-family: verdana; }

html {
  height: 100%;
}


body {
font-size: 13px; 
color: #000; 
background-color: white;
background-position: center;
background-repeat: repeat-y; 
background-image: url('../images/background.jpg'); 

}

/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}

/* Header div */
#wrapper #header {
  height: 200px;
  background-color: green;

}

/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}

/* Horizontal list div */
#wrapper #navigation {
  height: 25px;
 background-color: white;
 display: block;

 }

/* Horizontal list */
#navigation ul {
 padding-top: 5px;
 list-style-type: none;
 text-align: center; 
 width: 960px

}

/* Horizontal list items */
#navigation li {
 display: inline-block;
 text-transform: uppercase;
 vertical-align: middle;
}

/* Horizontal list link */
#navigation a {
 height: 25px; 
 width: auto;
 display: block;
 line-height: 15px;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 color: black;
 padding-left: 8px;
 padding-right: 8px;
}

/* Horizontal list hover attribute */
#navigation a:hover {
 color: Darkgrey;
 }


 /* Content div */
 #wrapper #content {
 display: inline-block;
 height: auto;
 width: 950px;
 background-color: white;
 padding-left: 10px;
 padding-right: 0px;
 }

/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}

/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}

/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}

/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}

/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}

/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}

/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}

/* Side menu div*/
#wrapper #content #menu {
 float: right;
 padding: 0px;
 margin: px;
 width: 220px;
 height: 1118px;
 }

/* Side menu*/
#menu ul {
 list-style-type: none;
 float: right;
 text-align: right; 
 width: 170px
}

#menu li {
background-image: url('../images/pg_menu_bg.png');
}


/* Side menu link */
#menu a {
 height: 30px; 
 display: block;
 vertical-align: middle;
 text-decoration: none;
 color: black;
 font-size: small;
 padding-top: 8px;
 margin-left: 10px;
 margin-right: 0px;
 }

/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}

/* Footer div */
#wrapper #footer {
 height: 40px;
 background-color: #82AAF1;
 width: 960px;
 margin: 0px, auto;
 position: relative;
 bottom: 0;

}

/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}

.padext {
padding-top:2px
}

抱歉，我还是初学者。

谢谢你的时间。

Answer 1

如果您HTML是这样的话：

<body>
<div id="wrapper">
    <div id="header"></div> 
    <div id="content"></div>
    <div id="footer"></div>
</div>

应用以下CSS。

#wrapper {
min-height:100%;
position:relative;
}


#content {
padding:10px;
padding-bottom:80px;   /* Height of the footer element */
}

padding-bottom的{{1}}被设置为页脚的高度。

#content

我建议您参考以下链接：How To Keep Your Footer At The Bottom Of The Page With CSS

缩小时，我无法将页脚固定在屏幕底部

1 个答案: