Jak uzyskać div, aby unosił się na dnie kontenera?

282

Przesuwałem obrazy i wstawki w górnej części kontenera za pomocą float: prawo (lub lewo) wiele razy. Ostatnio natrafiłem na potrzebę przeniesienia div w prawym dolnym rogu innego div z normalnym zawijaniem tekstu, który otrzymujesz z float (tekst zawijany powyżej i tylko z lewej strony).

Pomyślałem, że to musi być stosunkowo łatwe, mimo że liczba zmiennoprzecinkowa nie ma dolnej wartości, ale nie byłem w stanie tego zrobić za pomocą wielu technik, a wyszukiwanie w sieci nie wymyśliło nic innego niż użycie absolutnego pozycjonowania, ale to nie podać prawidłowe zawijanie wyrazów.

Myślałem, że będzie to bardzo powszechny projekt, ale najwyraźniej tak nie jest. Jeśli nikt nie ma sugestii, będę musiał podzielić mój tekst na osobne pola i wyrównać div ręcznie, ale jest to raczej niepewne i nie chciałbym robić tego na każdej stronie, która tego potrzebuje.

EDYCJA: Tylko uwaga dla każdego, kto tu przyjdzie. Pytanie połączone powyżej jako duplikat nie jest w rzeczywistości duplikatem. Wymóg zawijania tekstu wokół elementu wstawki czyni go zupełnie innym. W rzeczywistości odpowiedź na najczęściej głosowaną odpowiedź tutaj wyjaśnia, dlaczego odpowiedź na powiązane pytanie jest błędna jako odpowiedź na to pytanie. W każdym razie nadal nie wydaje się, aby istniało ogólne rozwiązanie tego problemu, ale niektóre rozwiązania zamieszczone tutaj i w powiązanym pytaniu mogą działać w określonych przypadkach.

Stephen Martin
źródło
158
Zajmę się tym problemem „zejdź
34
Podsumowanie @ Shog9: css potrzebuje elementu „sink”.
gailbear
1
Większość odpowiedzi tutaj pomija wymóg zawijania tekstu powyżej elementu „zatopionego”. Ale odpowiedź Stu działa (z JQuery).
Steve Bennett
1
Nie wydaje mi się to takie zabawne, chciałbym wiedzieć, w jaki sposób udaje ci się najpierw unieść w prawo lub w lewo w prawdziwym życiu ... Jest całkowicie pływający w punkcie widzenia osi Z.
Kapryśny
1
Korzystanie z flexboksów - stackoverflow.com/a/27812717/2680216
Josh Crozier

Odpowiedzi:

303

Ustaw div rodzica na position: relative, a następnie div wewnętrzny na ...

position: absolute; 
bottom: 0;

... i proszę bardzo :)

Timothy Khouri
źródło
101
Tak, myślałem, że tak też powinno być, ale kiedy ustawisz pozycję na absolutną, element nie będzie już uczestniczył w układzie elementu zawierającego, więc nie ma zawijania słów, a tekst w dolnym rogu jest zasłonięty.
Stephen Martin,
2
Może przydałaby Ci się kombinacja zmiennoprzecinkowa zawierająca div z pozycją względną i techniką absolutną.
dylanfm,
1
Ustawienie pływaka w prawo, a następnie zastosowanie np. Ujemnej górnej pozycji względnej, prowadzi do przesunięcia obrazu nad / pod renderowaniem tekstu przed umieszczeniem go w pojemniku przed tym obrazem.
Felix Lamouroux
6
pozycja absolutna została wymieniona jako rozwiązanie nie do przyjęcia, niestety
Witalij
2
Nie. To nie działa Zamiast tego ustawia się na dole całej strony.
Erik Aronesty
76

Oto sposób na to, aby działał:

  • Unieś swoje elementy jak zwykle
  • Obróć macierzystą div o 180 stopni za pomocą

    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

    JSfiddle: http://jsfiddle.net/wcneY/

  • Teraz obróć wszystkie elementy, które unoszą się w lewo (nadaj im klasę) o 180 stopni, aby ponownie je wyprostować. Voila! unoszą się na dno.

Tom Groentjes
źródło
1
To najlepsze rozwiązanie, ponieważ możesz zachować dynamiczną wysokość treści! Dzięki
Jordan Morris
2
Chociaż jest to niesamowite rozwiązanie, psuje moje narzędzia programistyczne Firefoksa Nightly: Selektor div wydaje się ignorować obrócone div i wszystko w nich zawarte.
Traubenfuchs
Nie można zawinąć tekstu w dolnym prawym polu: wszystkie litery są odwrócone do góry nogami i czytane (?) Od dołu do góry. jsfiddle.net/xu8orw5L
robert4
To szalony człowiek! działa, jeśli nie ma znaczenia, że ​​wszystko ma się do góry nogami
MQ87,
5
To jest praca diabłów i używam jej natychmiast.
Stumblor
49

Po kilku dniach zmagania się z różnymi technikami muszę powiedzieć, że wydaje się to niemożliwe. Nawet używając javascript (czego nie chcę robić) nie wydaje się to możliwe.

Wyjaśnienia dla tych, którzy mogli nie rozumieć - tego właśnie szukam: podczas publikowania dość często układa się wstawkę (obraz, tabelę, rysunek itp.), Aby jej dolne linie były wyrównane do dolnej ostatniej wiersz tekstu bloku (lub strony) z tekstem przepływającym wokół wstawki w naturalny sposób powyżej oraz w prawo lub w lewo, w zależności od strony, na której wstawka jest włączona. W html / css użycie stylu pływakowego do wyrównywania górnej krawędzi wstawki z górą bloku jest trywialne, ale ku mojemu zaskoczeniu wydaje się niemożliwe wyrównywanie dolnej części tekstu i wstawki, mimo że jest to typowe zadanie układu .

Chyba będę musiał powtórzyć cele projektowe dla tego przedmiotu, chyba że ktoś zaproponuje coś w ostatniej chwili.

Stephen Martin
źródło
6
Nie - nie jest to publikacja drukowana. Istnieje kilka rzeczy, które są wyjątkowo trudne lub niemożliwe do osiągnięcia przy użyciu tylko html / css.
Traingamer
Wiem, że to już dość stare, ale ta wersja pytania pojawiła się, gdy miałem ten sam problem i rozwiązałem go za pomocą display: flex i ustawienie górnego pojemnika o bardzo wysokiej elastyczności i pojemnika Chciałem spłynąć na dno jako po prostu flex-grow: 1. I oczywiście kierunek wzrostu musi być kolumnowy.
Alexandra
@Aleksandra, czy prawe dolne pole przesuwa tekst wokół jego rogów, jak robią to zwykłe zmiennoprzecinkowe? „Przepływ tekstu” jest jednym z wymagań OP
Ejaz
Zetknąłem się już z takimi problemami i używam siatki CSS, aby ją ściągnąć. Jeśli tylko załączyłeś wizualną reprezentację problemu. Odpowiedź na to pytanie może być udzielona 11 lat po pojawieniu się CSS Grid, aby nas uratować.
raku
16

Osiągnąłem to w JQuery, umieszczając element rozpórki o zerowej szerokości powyżej pływaka w prawo, a następnie zmieniając rozmiar rozpórki (lub rury) zgodnie z wysokością rodzica pomniejszoną o wysokość pływającego dziecka.

Przed uruchomieniem js używam bezwzględnego podejścia do pozycji, które działa, ale umożliwia przepływ tekstu z tyłu. Dlatego przełączam się na pozycję statyczną, aby umożliwić podejście rozpórki. (nagłówek jest elementem nadrzędnym, wycięcie jest tym, którego chcę u dołu po prawej, a rura to moja kolumna)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

Rura musi zająć 1. miejsce, następnie wycięcie, a następnie tekst w kolejności HTML.

Stu
źródło
2
To dużo pracy, a używanie javascript do stylizacji jest zawsze rezerwą ostatniej szansy, ponieważ łatwo się psuje, jeśli później zmienisz css. Ale tak, to działa, więc jeśli kluczowe jest, aby div znajdował się na dole z zawijaniem wyrazów: idź.
Wytze
2
To działało dla mnie, ale nie mogłem być dokładny. Przypuszczam, że winowajcą może być .height (). Wydaje się, gdy wokół bloku pływającego jest dużo tekstu na poziomie bloku (np. Wielu dzielników i akapitów), .height () dostaje małą zmienną w zależności od tego, jak tekst łamie linie.
atwixtor
Poszedłem w drugą stronę i sprawdziłem szerokość pojemnika (nagłówek) oraz jeden fragment treści, który musiałem owinąć (logo) i ustawić maksymalną szerokość absolutnie pozycjonowanej treści (nawigacja). Bez pływaków i bez dodatkowych elementów. Nadal masz JS i zależy od tego, co musisz zrobić.
icrf
To działa. Pamiętaj tylko, aby uczynić to również programem do zmiany rozmiaru okna. Musiałem ręcznie odjąć marginesy wewnętrznej skrzynki.
dspeyer
13

Spowoduje to umieszczenie stałej div na dole strony i poprawki na dole podczas przewijania w dół

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}
James L.
źródło
4
To nie robi tego, co on próbuje zrobić. @Timoty i @Yona mają rację.
Adam
11

Umieść div w innym div i ustaw styl div rodzica na position:relative;Następnie na div div ustaw następujące właściwości CSS:position:absolute; bottom:0;

Yona
źródło
1
Zobacz mój komentarz do Tymoteusza. Jak widać tutaj: emsoft.ca/absolutebottomtest.html zawijanie wyrazów nie działa. Część treści jest zasłonięta.
Stephen Martin,
Jest to idealne rozwiązanie, jeśli nie potrzebujesz tekstu wewnątrz div dziecka.
Aenadon,
4

Jeśli nie masz nic przeciwko temu, że dolna linia tekstu znajduje się z boku bloku (w przeciwieństwie do całkowicie dookoła i pod nim, co nie jest możliwe bez zakończenia bloku i rozpoczęcia nowego), nie jest niemożliwe przeniesienie bloku do jednego z dolnych rogów bloku rodzica. Jeśli umieścisz część treści w tagu akapitu w bloku i chcesz przenieść link do prawego dolnego rogu bloku, umieść link w bloku akapitu i ustaw go jako pływający: w prawo, a następnie wstaw tag div z czystym : oba ustawione tuż pod końcem znacznika akapitu. Ostatnim divem jest upewnienie się, że znacznik nadrzędny otacza zmienne.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>
CC.
źródło
4

Jeśli ustawisz element nadrzędny jako pozycję: względną, możesz ustawić dziecko na dolną pozycję ustawienia: absolutną; i na dole: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}
<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Filipe Pitacho
źródło
3

Jeśli chcesz, aby tekst ładnie się zawijał: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}
<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

Salman von Abbas
źródło
3

Wiem, że te rzeczy są stare, ale ostatnio napotkałem ten problem.

skorzystaj z porady absolutnej pozycji divs jest naprawdę głupie, ponieważ cała rzecz typu float traci punkt z pozycjami absolutnymi.

teraz nie znalazłem uniwersalnego rozwiązania, ale w wielu przypadkach prople używam pływających div, aby wyświetlić coś z rzędu, jak szereg elementów rozpiętości. i nie można tego wyrównać w pionie.

Aby osiągnąć podobny efekt, możesz to zrobić: nie ustawiaj div jako float, ale ustaw jego właściwość display na inline-block. wtedy możesz wyrównać go w pionie, jakkolwiek ci się podoba. wystarczy własności div określonym profilu rodzica vertical-alignalbo top, bottom, middlelubbaseline

mam nadzieję, że to komuś pomoże

counterwewe
źródło
Nie mam pojęcia, czy działa to w typowych sytuacjach, ale z jQueryMobile jest to całkowicie niefunkcjonalne.
Wytze
to jest dokładnie to, co jest potrzebne do wyrównania div do dołu lub obok siebie, świetna pomoc
StudioX
2

Wraz z wprowadzeniem Flexboksa stało się to dość łatwe bez większego hakowania. align-self: flex-endna elemencie potomnym wyrówna go wzdłuż osi poprzecznej .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}
<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Wynik:

Manoj Kumar
źródło
Wydaje się, że nie przeczytałeś dokładnie pytania. Ustawienie go na dole jest łatwe, ale nie daje pożądanego zachowania swobodnego.
Dennis98
Nie mogę, bo niestety nie mam odpowiedzi i nie widzę czegoś. w przeciwnym razie odpowiedź będzie błędna, wymagałoby to korekty.
Dennis98,
1

Zrobiłbym tylko stół.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

A CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Zobacz to w akcji:
http://jsfiddle.net/mLphM/1/

Barney
źródło
1

Wypróbowałem kilka z tych technik, a następujące działały dla mnie, więc jeśli wszystko inne tutaj, jeśli wszystko inne zawiedzie, spróbuj tego, ponieważ zadziałało dla mnie :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>
Kin Sport
źródło
1

Wybrałem takie podejście @ dave-kok. Ale działa tylko wtedy, gdy cała zawartość pasuje bez przewijania. Doceniam, czy ktoś poprawi się

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Oto kod http://jsfiddle.net/d9t9joh2/

chilicoder
źródło
1

Jest to teraz możliwe dzięki Flex Box. Wystarczy ustawić „display” div div jako „flex” i ustawić właściwość „margin-top” na „auto”. Nie zniekształca to żadnej własności obu div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}
<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Tushar Bohra
źródło
1

Nie jestem pewien, ale scenariusz opublikowany wcześniej wydawał się działać, jeśli użyjesz position: krewny zamiast absolutnego na div div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}
<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

I żadnych stołów ...!

RedGen
źródło
0

Jeśli potrzebujesz względnego wyrównania, a DIV nadal nie dają ci tego, czego chcesz, po prostu użyj tabel i ustaw valign = "bottom" w komórce, w której chcesz dopasować zawartość do dołu. Wiem, że nie jest to świetna odpowiedź na twoje pytanie, ponieważ DIV mają zastąpić tabele, ale to właśnie zrobiłem ostatnio z podpisem obrazu i jak dotąd działało bezbłędnie.

BBAmp
źródło
0

Próbowałem również tego scenariusza opublikowanego wcześniej;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Pozycjonowanie absolutne naprawia div do najniższej części przeglądarki po załadowaniu strony, ale kiedy przewijasz w dół, jeśli strona jest dłuższa, nie przewija się wraz z tobą. Zmieniłem położenie, aby było względne i działa idealnie. Div przechodzi prosto na dół po załadowaniu, więc nie zobaczysz go, dopóki nie zejdziesz na dół.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}
mówiD0G
źródło
Jakiś sposób, aby działał na nieznanej wysokości? Niestety marża: -100%; odnosi się do wysokości pojemnika, którą zgaduję.
chrześcijanin,
0

Jednym z ciekawych podejść jest ułożenie kilku prawych elementów pływających jeden na drugim.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Jedynym problemem jest to, że działa to tylko wtedy, gdy znasz wysokość pudełka.

Dave Kok
źródło
0

Odpowiedź Stu jest najbliższa dotychczasowej pracy, ale nadal nie bierze pod uwagę faktu, że wysokość twojego zewnętrznego div może się zmieniać, w zależności od sposobu, w jaki tekst się w nim zawija. Zatem zmiana położenia wewnętrznego div (poprzez zmianę wysokości „rury”) tylko raz nie wystarczy. Ta zmiana musi nastąpić wewnątrz pętli, abyś mógł ciągle sprawdzać, czy osiągnąłeś już właściwe pozycjonowanie, i w razie potrzeby dostosuj.

CSS z poprzedniej odpowiedzi jest nadal całkowicie poprawny:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Jednak JavaScript powinien wyglądać mniej więcej tak:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}
sherlock42
źródło
0

Wiem, że to bardzo stary wątek, ale nadal chciałbym odpowiedzieć. Jeśli ktoś postępuje zgodnie z poniższym css & html, to działa. Div stopki dziecka będzie przyklejać się do dołu jak klej.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>
Tomasz
źródło
0

Aby użyć margin-topwłaściwości css w celu ustawienia stopki na dno kontenera. I użyć text-align-lastwłaściwości css do ustawienia zawartości stopki na środku.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>
rashedcs
źródło
0

Och, młodzi ... Oto jesteś:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Brak absolutnej pozycji! Czuły! Stara szkoła

Wsiewołod Azowski
źródło
-1

Dość stare pytanie, ale wciąż ... Możesz umieścić div na dole strony w następujący sposób:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Możesz zobaczyć, gdzie dzieje się magia. Myślę, że możesz zrobić to samo, aby przenieść go na dno rodzica div.

Miha Eržen
źródło
4
To jednak nie zawija tekstu. Za nim pojawia się dowolny tekst.
gailbear
3
Tak, nie jest to „zmienne” w znaczeniu tego słowa CSS. Jest „przeniesiony”, ale nie unosił się.
ErikE
-1

proste ...... w pliku html po prawej .... na dole znajduje się „stopka” (lub div, który chcesz na dole). Więc nie rób tego:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

ZRÓB TO: (wstaw stopkę poniżej).

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

Po wykonaniu tej czynności możesz przejść do pliku css i przesunąć „pasek boczny” po lewej stronie. następnie „treść” unosi się w prawo, a następnie „stopka” wyczyść oba.

to powinno zadziałać. dla mnie.

Jeff
źródło
-2

Dostałem to do pracy przy pierwszej próbie dodając position:absolute; bottom:0;do div ID w CSS. Nie dodałem stylu nadrzędnegoposition:relative; .

Działa idealnie zarówno w Firefoksie, jak i IE 8, jeszcze nie wypróbowałem go w IE 7.

mówiD0G
źródło
-2

alternatywną odpowiedzią jest rozsądne użycie tabel i rozpiętości wierszy. ustawiając wszystkie komórki tabeli w poprzednim wierszu (z wyjątkiem jednej głównej zawartości) na rowspan = "2", zawsze otrzymasz jedną komórkę na dole głównej komórki tabeli, którą zawsze możesz ustawić valign = "bottom".

Możesz także ustawić jego wysokość tak, aby była minimalna dla jednej linii. Dzięki temu zawsze otrzymasz ulubioną linię tekstu na dole, niezależnie od tego, ile miejsca zajmuje reszta tekstu.

Próbowałem wszystkich odpowiedzi div, nie byłem w stanie zmusić ich do zrobienia tego, czego potrzebowałem.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>
cdturner
źródło
2
Projektowanie oparte na tabelach jest uważane za złą praktykę przez większość programistów. Styl CSS jest preferowany do stylizowania strony i możesz osiągnąć te same rzeczy w sposób znacznie bardziej przyjazny semantycznie.
LoveAndCoding
Tabele nie są bardzo przyjazne dla wielu formatów (drukowane, ekranowe, mobilne), nie mają do nich przepływu. Po prostu oferuję alternatywę.
cdturner
-2

oto moje rozwiązanie:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>
drfu
źródło
-2

Możesz spróbować użyć pustego elementu o szerokości 1px i przesunąć go. Następnie usuń element, który chcesz ustawić, i użyj wysokości pustego elementu, aby kontrolować, jak daleko sięga.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
olliew
źródło