Jak dopasować div do dolnej części strony, a nie na dole ekranu?

Question

Chcę dopasować div do dolnej części strony, a nie do dolnej części ekranu. Kiedy to zrobię:

#contact-block{ 
position: absolute; 
    bottom: 0; left: 0; 
} 

, div znajduje się w dolnej części ekranu. Kiedy moja strona jest długa, muszę przewijać w dół, a div, który powinien znajdować się na dole, unosi się gdzieś pośrodku.

Może to być proste rozwiązanie, ale po prostu go nie widzę.

Tu jest mój HTML:

<div id="left"> 
<div id="submenu"> <span class="menutitle">Services</span> 
    <ul> 
    </ul> 
</div> 

<div id="contact-block"> 
<span class="contacttitle">Contact</span></div> 
</div> 
<div id="content"> 
</div> 

Dodałem także trochę obraz, aby zilustrować, co mam na myśli:

Czerwona div div jest kontakt.

Edytuj: Znalazłem rozwiązanie z jQuery i CSS. To może nie być najlepsze rozwiązanie, ale hej, działa.

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60; 
$("#contact-block").css("top", offset); 
$("#contact-block").css("left", $("#wrapper").position().left); 

CSS:

#contact-block { 
position : absolute; 
width:216px; 
height:100px; 
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c; 
} 

Answer 1

Stanowisko swojej absolute umieszczonego elementu zależy od pierwszego przodka-elementu, który nie jest umieszczony static (który jest domyślnym, tak musisz wyraźnie ustawić go na relative (lub absolute)).

Należy się upewnić, że otaczający kontener #left ma 100% wysokości dokumentu i position:relative, a wszystko jest w porządku.

Answer 2

Możesz chcieć spojrzeć na kolumny o jednakowej wysokości: http://css-tricks.com/fluid-width-equal-height-columns/.

W prostych przypadkach może to być na tyle (jestem zakładając, że kolumna #left unosi się w lewo i prawo content kolumna pływa i nie ma innego elementu otoki, tylko body):

body { 
    position:relative; 
} 

#contact-block { 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

Nie zapomnij dodaj bardziej przejrzysty element <div style="clear:both"></div> na końcu swojego body.

Answer 3

Możesz całkowicie ustawić pozycję swoich div. Ta technika wymaga elementu #wrapper, którego nie jestem fanem, ale hej, musisz robić watcha.

W tym przykładzie usunąłem całkowicie całość, ponieważ było to wymagane tylko dla układu i nie jest już konieczne.

HTML:

<div id="wrapper"> 
    <div id="submenu">This is services</div> 
    <div id="contact-block">This is contact</div> 
    <div id="content">This is content</div> 
</div>​ 

CSS:

#wrapper { 
    position: relative; 
    width: 960px; 
} 

#submenu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 320px; 
    height: 320px; 
} 

#contact-block { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 320px; 
    height: 160px; 
} 

#content { 
    position: relative; 
    left: 320px; 
    right: 0; 
    top: 0; 
    width: 640px; 
    height: 640px; 
} 

//#content position is relative for the #wrapper to stretch. 
//The left property is equal to the width of the #submenu or #contact-block element 

Dobrym punktem tej techniki jest to, że daje czystsze HTML. Uważam, że łatwiej będzie stworzyć mobilną wersję twojej wersji, jeśli zajdzie taka potrzeba.

The jsfiddle

dodatkowe myśl: Element #wrapper mogą być łatwo usunięte za ciebie body element, który jest wielkim krokiem w kierunku semantycznego HTML. Check this out!

Answer 4

Sugerowałbym umieszczenie czerwonego div wewnątrz prawego długiego div i na jego końcu. Następnie użyj position: relative i ujemnych lewych marginesów na czerwonym div, aby wypchnąć go w lewo. W ten sposób, gdy twój prawy div rozwija się, twoja czerwona div zawsze pozostaje na dole.