Высота затенения нижнего колонтитула неверна

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 (при условии, что он остается одной строкой).

Это только начало; надеюсь, это будет немного легче управлять.