Заголовок наверху всегда и нижний колонтитул внизу

Basiclly Я пытаюсь сделать исправление заголовка в верхней части страницы, и в то же время мне также нужен мой нижний колонтитул, который должен быть внизу страницы, меньше или больше контента. Но я не хочу, чтобы моя позиция нижнего колонтитула исправлена. Поэтому, когда когда-либо есть большой amout для нижнего колонтитула данных, двигайтесь вместе с этим. Код, который я использую прямо сейчас, отлично работает, если я не исправляю заголовок.Заголовок наверху всегда и нижний колонтитул внизу

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

CSS для этого

*{ margin:0px; padding:0px;} 
    html{ 
    margin:0; 
    padding:0; 
    height:100%; 
    } 
    body { 
    min-height:100%; 
    position:relative; 
    } 
    #header { 
    padding:10px; 
    background:#5ee; 
    } 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

Это код, я не сосредоточил свой заголовок в этом, но мне нужна помощь, чтобы это исправить.

источник

2013-04-24 Adi

замените вашу роль .... #content { padding: 10px; padding-bottom: 80px;/* Высота элемента нижнего колонтитула */\t \t min-height: 700px; } #footer { ширина: 100%; высота: 80px; позиция: относительная; фон: # ee5; } – hayat

-4

Используйте этот

position:fixed;

Для вашего заголовка.

Что касается колонтитула - используйте http://ryanfait.com/sticky-footer/

источник

2013-04-24 12:21:50 Deez

он явно сказал, что он не хочет использовать фиксированную позицию –

также, что, если содержание страницы больше, чем площадь окна. Вы получите эффект перекрытия. – intelis

Я бы проголосовал за это дважды, если бы мог, для этого отредактировал –

Что вы ищете специально называются «липкой сноской».

http://www.cssstickyfooter.com/

источник

2013-04-24 12:23:10 Adam

ну, это имя кто-то назвал их реализацию метода = P –

Не работает. Так что любая другая идея, которая может мне помочь. – Adi

Постарайтесь. Оно работает. – Adam

Если я правильно Вас понял, то мне кажется, что вы после этого липкого заголовка. Попробуйте заменить свои два правила с последующим

 #header{ 
     background: none repeat scroll 0 0 #55EEEE; 
     padding: 10px; 
     position: fixed; 
     top: 0; 
     width: 100%; 
    } 
    #content{ 
     background: none repeat scroll 0 0 #FF0000; 
     color: #FFFFFF; 
     height: 2000px; 
     margin: 40px 0 0; 
     padding: 10px 10px 80px; 
    }

Here is the demo изменения #content высоты влияет на положение колонтитула, но не заголовок х.

источник

2013-04-24 12:30:28 Ejaz

Я не могу дать высоту моему '# содержимому', потому что контент очень и если меньше« контента », тогда мне нужно« прокручивать вниз », чтобы увидеть нижний колонтитул. Так что любой другой вариант. – Adi

Высота была назначена _ _ content_ только для демонстрационной цели. Попробуйте удалить его :) – Ejaz

Заголовок наверху всегда и нижний колонтитул внизу

ответ

Смежные вопросы