Question

我有一个简单的着色功能，无论大小/尺寸如何，都会跨越网页的底部（我希望）。但是，着色框不会超出单词的高度。我尝试添加高度变量，没有任何作用。帮助

footer {
   position:fixed;
   height:20px;
   width:100%;
   bottom:0;
   z-index:1;
   }
footer small {
   width:100%;
   height:20px;
   float:left;
   right:5px;
   opacity: 0.6;
   background-color: #000000;
   clear:both;
   margin:0 0 0 0;
   color:#fff;
   text-align:right;
   }

footer a {
   color:#fff
}

我甚至不确定如何表达问题，因此很难找到答案。所以任何帮助都会受到赞赏。

Answer 1

我已经清理了你的代码，使其更容易理解（并且更容易解释）

// Control the shading
footer {
   // sets position of element relative to window
   position:fixed;
   bottom:0;
   left: 0;

   display:block;
   background-color: #000000;
   opacity: 0.6;
   width:100%;
   height:20px;
   text-align:right;
   z-index:1;
}

// Control the text
footer small {
   color:#fff;
}

footer a {
   color:#fff
}

这是小提琴： http://jsfiddle.net/c9gkM/2/

要了解的一些事项：

.footer用于操纵底部div的属性（即高度，背景颜色等）。这应该允许您轻松编辑阴影本身。
.footer small用于处理文本。您可以向其声明 font-size，font-weight，color 等属性。另一个技巧是使用line-height并声明其值使div内的文本垂直居中（假设它仍然是一行）。

这只是一个开始;希望这应该更容易管理。

页脚着色高度错误

1 个答案: