Сбросить позицию при использовании позиции: исправлено

Я хочу создать сайт, на котором верхний и нижний колонтитулы (динамические по высоте) имеют фиксированное положение. Содержимое должно начинаться непосредственно под заголовком. Я быстро сделал example. (Желтые и красные верхние позиции одинаковы, я хочу, чтобы желтый DIV начинался под красным DIV.)Сбросить позицию при использовании позиции: исправлено

Если вы установили положение заголовка на фиксированное, содержимое DIV размещено в том же верхнем положении заголовка.

Например, если вы используете float, вы можете использовать clear: как для сброса позиции, есть ли также возможность для позиции: исправлено?

источник

2012-04-06 screaming SiLENCE

Только CSS Решение

Используйте какой-нибудь способ раздуть пространство заголовок занимает на верхней части экрана:

padding-top:
margin-top:
position:relative + top:

Затем добавьте отдельную таблицу стилей CSS для изменения height для обычного viewport s по сравнению с мобильным телефоном viewport s.

(или см. Ниже для решения JavaScript для установки атрибута height динамически.)

jsFiddle

HTML:

<html> 
    <body> 
    <div id="header"> 
     Header 
    </div> 
    <div id="wrapper"> 
     <p>First Row</p> 
     <p>Next row</p> 
     <p>...</p> 
     <p>Last row</p> 
    <div> 
    </body> 
</html>

CSS (обычная версия):

#header { 
    position:fixed; 
    height:100px; 
    width:100%; 
    background-color:green; 
    color:white; 
} 
#wrapper { 
    position:relative; 
    top:101px; 
}

CSS (мобильная версия):

#header { 
    height:50px; 
} 
#wrapper { 
    top:51px; 
}

JavaScript Решение

HTML (копирование и вставка-возможности):

<head> 
    <style> 
    #header { 
     position:fixed; 
     height:100px; /* try different values here! */ 
     width:100%; 
     background-color:green; 
     color:white; 
    } 
    #wrapper { 
     position:relative; /* look Mom no height! */ 
    } 
    </style> 
</head> 
<html> 
    <body> 
    <div id="header"> 
     Header 
    </div> 
    <div id="wrapper"> 
     <p>First Row</p> 
     <p>Next row</p> 
     <p>...</p> 
     <p>Last row</p> 
    <div> 
    <script language="javascript"> 
     document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1); 
    </script> 
    </body> 
</html>

источник

2012-04-06 15:18:53 JohnB

Кажется, что я хочу (с динамическим по высоте заголовком) единственный способ установить высоту или использовать маржу вместе с jQuery, чтобы получить высоту заголовка. –

Хмм, никогда не слышал о jsFiddle, приятное приложение! –

Ваш ответ отлично подходит для заголовка с фиксированной высотой ... Но высота моего заголовка может измениться. Поэтому мне нужно будет использовать javascript для получения высоты.Спасибо, в любом случае! –

использование z-index (css) для одного div сделать это: z-index: -1; для другого z-индекса: 1;

http://www.w3schools.com/cssref/pr_pos_z-index.asp

источник

2012-04-06 15:11:01

z-index просто изменяет то, что DIV находится наверху и что DIV находится внизу ... Но это не то, что я ищу. –

Я думаю, что вы хотите, чтобы добавить маржин-верхнюю часть, которая равна заданной высоты вашего заголовка. Сделайте то же самое для нижней части основания, чтобы разместить нижний колонтитул.

источник

2012-04-06 15:11:20 Luke

Это была моя первая идея, но когда вы не знаете высоту заголовка, вы не можете использовать эту идею ... Я использую шаблон Drupal, который меняет макет для мобильных, маленьких и больших экранов ... –

Я вижу, вы должны сказать, что у вас есть динамический заголовок в вашем вопросе. Вы можете использовать jquery (javascript), чтобы найти высоту заголовка и нижнего колонтитула, затем сделайте эти значения крайнее и крайнее. – Luke

Изменен вопрос. Заголовок действительно динамичен по высоте. Вы не думаете, что это возможно только с помощью CSS? –

Вы должны использовать padding-top и padding-bottom. В вашем примере, если вы добавите padding-top: 25px; в стиль, он отобразится под верхним фиксированным div.

Как вы знаете, фиксированное положение отображается в том же месте в браузере и не перемещается по мере прокрутки. Остальная часть «нормального» контента не зависит от фиксированных позиционированных элементов, поэтому вам нужно использовать отступы и поля для создания некоторого пространства в буфере.

источник

2012-04-06 15:11:41 AndrewR

См. Комментарий выше ... Когда вы уменьшаете окно, высота заголовка DIV изменяется, поэтому ... вы не знаете высоту. –

Вы можете назначить 'width' или' height' вашему фиксированному DIV, чтобы предотвратить динамическое изменение размеров. – AndrewR

<body> 

    <div style="background-color: red; position: fixed;width:100%;">This is a test with position set to fixed</div> 
    <div style="background-color: yellow; height: 1000px;">This is content that should start beneath the fixed DIV</div> 

    </body>

источник

2012-04-06 17:10:20 srini

Я знаю, что это старый пост, но в последнее время сам сталкиваюсь с этим вопросом. Поэтому просто подумал, что я поделюсь своим решением (хотя я еще не полностью его протестировал - добавьте здесь отказ от ответственности).

Я создал другой контейнер (div) под фиксированным (вверху страницы), с теми же настройками, классом и т. Д. И контентом.

Затем я добавил стиль, чтобы сбросить этот второй div на позицию: статический, видимость: скрытый. Вам действительно не нужно скрывать его, поскольку он полностью покрыт фиксированным div; но на всякий случай это старый браузер, который не распознает позицию: исправлено.

В любом случае это даст вам буферную область над вашим контентом, которая всегда должна быть правильной высоты. Недостатком является то, что если есть динамический контент, тогда он будет дважды включен в вашу страницу для этой области, но вам нужен этот контент, чтобы убедиться, что скрытый div - это правильная высота.

Не идеальное решение, но лучшее, что я могу придумать ... bar, используя javascript.

источник

2012-12-07 04:49:24 Chas

Сбросить позицию при использовании позиции: исправлено

ответ

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