Позиционирование заставляет тело перекрываться с нижним колонтитулом

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

Благодаря

JSFIDDLE здесь.

CSS

* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
div 
{ 
    display: block; 
} 

/* --- BODY ------------------------------------------------ */ 
#body_block 
{ 
    float: left; 
    width: 100%; 
    background: #EEEEEE; 
    /*background-image: url('../images/bg3.jpg');*/ 
} 
#body 
{ 
    margin: 0 auto; 
    position: relative; 
    width: 900px; 
    /*background: #BB0099;*/ 
} 
#body_title 
{ 
    position: absolute; 
    top: 15px; 
    left: 0px; 
    width: 200px; 
    /*height: 24px;*/ 
    background: #aa99ff; 
} 
#body_search 
{ 
    position: absolute; 
    top: 15px; 
    right: 0px; 
    width: 200px; 
    /*height: 24px;*/ 
    background: #aa99ff; 
} 
#body_content 
{ 
    position: relative; 
    top: 50px; 
    left: 0px; 
    width: 900px; 
    /*height: 24px;*/ 
    background: #aa99ff; 
} 

/* --- FOOTER ---------------------------------------------- */ 
#footer_block 
{ 
    float: left; 
    width: 100%; 
    /*background: #DDDDDD;*/ 
} 
#footer 
{ 
    margin: 0 auto; 
    position: relative; 
    width: 900px; 
    padding: 15px 0px 15px 0px; 
    /*background: #CC0011;*/ 
}

HTML

<body> 

    <div id="body_block"> 
     <div id="body"> 
      <div id="body_title"><h1>Home</h1></div> 
      <div id="body_search"><h1>Search</h1></div> 
      <div id="body_content"> 
       TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM 
      </div> 
     </div> 
    </div> 

    <div id="footer_block"> 
     <div id="footer">FOOTER</div> 
    </div> 

</body>

источник

2013-09-04 BentCoder

Я не понимаю, почему есть обертки вокруг вашего тела и нижнего колонтитула (они только завернуть один элемент), и я не понимаю, почему они плавали. Есть ли причина? – Katstevens

Честно говоря, я не дизайнер, поэтому моя логика, скорее всего, не имеет смысла для многих парней. Я открыт для исправлений, предложений, модификаций и т. Д. – BentCoder

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

Как сказал @DavidMillar, очистка поплавков на нижнем колонтитуле позволит решить проблему перекрытия. Тем не менее, я подозреваю, что вы можете достичь дизайна, который вы хотите гораздо более просто, используя некоторые элементы дизайна, как и предполагалось.

* { 
    margin: 0px; 
    padding: 0px; 
} 

#body { 
    background: #EEEEEE; 
    margin: 0 auto; 
    position: relative; 
    width: 900px; 
    /*background: #BB0099;*/ 
} 

#body_title { 
    float: left; 
    width: 200px; 
    /*height: 24px;*/ 
    background: #1199ff; 
} 

#body_search { 
    float: right; 
    width: 200px; 
    /*height: 24px;*/ 
    background: #aa11ee; 
} 

#body_content { 
    clear: both; 
    width: 900px; 
    /*height: 24px;*/ 
    background: #aa99ff; 
} 

#footer { 
    width: 900px; 
    padding: 15px 0px 15px 0px; 
    background: #CC0011; 
}

Резюмируя:

div s является блоком по умолчанию, нет необходимости указывать
маржу установки/отступов = 0 на * будет применять его все элементы: Нет необходимости повторно в индивидуальном порядке.
#body_title и можно перемещать влево/вправо, чтобы держать их там, где вы хотите.
нужно очистить оба поплавки на #body_content так далее обратно в документе поток
Нет необходимости добавлять position: relative, если вы не планируете на перемещение элементов вокруг. Поскольку сейчас все в потоке документа (кроме двух поплавков сверху), не нужно размещать их.

Я также удалил обертки из тела и нижнего колонтитула, потому что я чувствовал, что они не нужны, но вы можете легко добавить их обратно.:)

Отъезд нового скрипки: http://jsfiddle.net/dR82X/

источник

2013-09-04 15:54:12 Katstevens

Footer по-прежнему на теле. – BentCoder

Вы проверили ссылку на скрипку, которую я разместил? У меня это выглядит правильно ... – Katstevens

Я проверяю с тремя браузерами, но все еще не правильно. – BentCoder

Если вы реализуете код из раствора "липкий сноска", вы также будете решать свои собственные проблемы.

Это описание липкой сноски, и как разрешить его: http://ryanfait.com/sticky-footer/

также:

CSS Only solution
CSS Tricks' solution

источник

2013-09-04 15:45:52 gibberish

Это только появляется сноска перекрывает тело, потому что вы» ve разместил содержимое в теле, чтобы оно выглядело на 50 пикселей ниже его первоначального местоположения. (например, position:relative;top:50px;)

Хотя нижний колонтитул на самом деле не перекрывает содержимое, вы можете убедиться, что он начинается ниже тела, добавив clear:both; в нижний колонтитул CSS, чтобы очистить предыдущие перемещенные элементы перед их рисованием.

источник

2013-09-04 15:49:48

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

Если вы хотели абсолютной

Fiddle: http://jsfiddle.net/mBwP8/1/

Код:

/* --- GENERAL --------------------------------------------- */ 
* { 
    margin: 0px; 
    padding: 0px; 
} 

/* --- BODY ------------------------------------------------ */ 
#body_block { 
    background: #EEEEEE; 
} 
#body { 
    margin: 0 auto; 
    position: relative; 
    width: 900px; 
    padding-top: 15px; 
} 
#body_title { 
    float: left; 
    width: 200px; 
    background: #1199ff; 
} 
#body_search { 
    float: right; 
    width: 200px; 
    background: #aa11ee; 
} 
#body_content { 
    clear: both; 
    width: 900px; 
    background: #aa99ff; 
} 

/* --- FOOTER ---------------------------------------------- */ 
#footer_block { 
    float: left; 
    width: 100%; 
} 
#footer { 
    margin: 0 auto; 
    width: 900px; 
    padding: 15px 0px 15px 0px; 
    background: #CC0011; 
}

Если вы хотели абсолютной позиции топ-ссылки, вы могли бы сделать что-то вроде следующего, но это не так необходимо. Читайте на float css и позиционируйте относительную и абсолютную. Они могут быть сложными, но вам понравится, когда вы это сделаете!

Fiddle: http://jsfiddle.net/ZRwqH/

Код:

/* --- GENERAL --------------------------------------------- */ 
* { 
    margin: 0px; 
    padding: 0px; 
} 

/* --- BODY ------------------------------------------------ */ 
#body_block { 
    background: #EEEEEE; 
} 
#body { 
    margin: 0 auto; 
    position: relative; /* now we need relative here, so the *absolute positioning* of the header is *relative* to this element */ 
    width: 900px; 
    padding-top: 55px; /* and we need to pad this because absolute positioning takes the header out of the document flow */ 
} 
#body_header { 
    position: absolute; /* taking this out of the document flow, but pushing it to the top of the (relative) container */ 
    top: 0; 
    left: 0; 
    width: 100%; /* abs positioning causing width to collapse, 100% pushes it back out to the full width of the (relative) container */ 
    padding-top: 15px; /* the extra space at the top */ 
} 
#body_header > div { /* to make all the "menu" links the same dimensions */ 
    width: 200px; 
    height: 40px; 
} 
/* we can now float *inside* of the abs positioned header, note that the header element will collapse 
    to zero + padding height unless you take steps to clear or contain these floats, but since the header 
    isn't needed for border or background color we don't care in this case. */ 
#body_title { 
    float: left; 
    background: #1199ff; 
} 
#body_search { 
    float: right; 
    background: #aa11ee; 
} 
#body_content { 
    clear: both; 
    width: 900px; 
    background: #aa99ff; 
} 

/* --- FOOTER ---------------------------------------------- */ 
#footer_block { 
    width: 100%; 
} 
#footer { 
    margin: 0 auto; 
    width: 900px; 
    padding: 15px 0px 15px 0px; 
    background: #CC0011; 
}

источник

2013-09-04 16:38:19 Skrivener

Позиционирование заставляет тело перекрываться с нижним колонтитулом

ответ

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