Відповідаючи, оскільки моя репутація недостатньо коментує. Але не дивись на це як на відповідь, просто додаткова інформація, як я, мала деякі проблеми як з колонтитулом, так і з позиціонуванням.
Під час налаштування сторінки таким чином, щоб моє колонтитул завжди залишався внизу, з абсолютним положенням, а основний контейнер / обгортка з відносним положенням.
Потім я виявив деякі проблеми з моїм текстовим вмістом і меню всередині того самого вмісту (біла частина сторінки між заголовком та нижним колонтитулом), коли їх встановлено на абсолютний, нижній колонтитул більше не залишається вниз.
Повідомлення - це, як ви кажете, складна тема.
Моє рішення, щодо вмісту, який я хотів у «абсолютному» положенні на своїй веб-сторінці, і не відсунути його в сторону, коли, наприклад, відкриваючи спадне меню, було насправді дати йому відношення до посади, і поставити його на 35ем нижче мого спаду меню. (35em - це висота мого спадного меню, коли воно повністю розширене)
Потім, Top: -35em, для вмісту, який раніше був відсунутий убік. А потім додаємо маржу внизу: -35em. Таким чином, вміст знаходиться "внизу" мого випадаючого меню, але візуально він знаходиться поряд з моїм спадною меню! А пробіл внизу до нижнього колонтитулу має лише 10-кратний запас, як це було до того, як почати займатися цим. Тож моє рішення для цього було таким:
html, body {
margin:0;
padding:0;
height:100%;
}
h1 {
margin:0;
}
#webpage {
position:relative;
min-height:100%;
margin:0;
overflow:auto;
}
#header {
height:5em;
width:100%;
padding:0;
margin:0;
}
#text {
position:relative;
margin-bottom:-32em;
padding-top:2em;
padding-right:2em;
padding-bottom:10em;
background-repeat:no-repeat;
width:70%;
padding-left:auto;
margin-left:auto;
margin-right:auto;
right:10em;
float:right;
top:-32em;
}
#dropdown {
position:absolute;
left:0;
width:20%;
clear:both;
display:block;
position:relative;
top:1em;
height:35em;
}
#footer {
position:absolute;
width:100%;
right:0;
bottom:0;
height:5em;
margin:0;
margin-top:5em;
}
Я бачу, що на ваше запитання відповіли добре, але після багатьох проблем я знайшов це дуже гарним рішенням і способом краще зрозуміти, як працює позиціонування .. Коли я розміщую свій текстовий вміст, під меню, що випадає, це не відбувається " t відсуньте мій текст убік. Якщо я змінив текст на позицію абсолютної, колонтитул не залишився на місці. Як я можу повірити, що це питання для більшої кількості людей, ніж я, я додаю це тут. Що насправді трапляється, це я поклав текст, 35ем, нижче моєї краплі вниз.
Потім я візуально поставив його поруч з іншим, з відносним положенням і вгорі: -35em ;, і ввечері вийшов величезний простір внизу, з запасом: -35em;
негативні значення занижуються часом, дуже хороша функціональність, коли хтось краще розуміє ці позиції!
Насправді фіксоване положення також здавалося логікою для мого нижнього колонтитулу, але я дійсно хочу, щоб нижній колонтитул переходив нижче області перегляду, якщо текст чи вміст довші, ніж вікно перегляду. І залишатися внизу, якщо на сторінці мало вмісту.
Цей параметр налаштував це дуже добре, і не забудьте використовувати "em", а не "px" для більш текучого / динамічного макета сторінки! :)
(можуть бути кращі рішення, але це працює для мене на крос-платформах, а також на пристроях).
