Mam do czynienia z problemem z nakładającym się na wysokość div 100%. Mógłbym użyć pozycji ustalonej, aby rozwiązać okładkę, ale to nie jest to, czego chcę, ponieważ powinieneś być w stanie przewinąć w dół na "okładce", aby ludzie o niższych rozdzielczościach niż moi mogli zobaczyć całą zawartość. PrzykłademUstaw wysokość 100% na podziałce bezwzględnej

Kod:

HTML

<body> 
<div>Overlay example text</div> 
</body>

CSS

body { 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
}

Problem: div w wysokości 100% zawiera tylko 100% WebBrowser/rzutni, ale chcę obejmuje całe ciało.

góry dzięki :)

Źródło

2013-01-08 Nworks

użyj Jquery, aby zmienić rozmiar DIV z absolutną pozycją – Maysam

to numer jeden z problemami z CSS. 'min-height' nie obiecuje co oznacza nazwa:/ – vsync

http://jsbin.com/ubalax/1/edit Ty możesz zobaczyć wyniki tutaj

body { 
    position: relative; 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top:0; 
    left:0; 
    background-color: yellow; 
}

Źródło

2013-01-08 15:04:16 ashley

Dobrze, więc wszyscy byli w drodze do poprawnej odpowiedzi, ale ta zmienna: lewa i pozycja: względna na ciele rozwiązała to. Dzięki! – Nworks

Mam pomysł ZERO, dlaczego to działa, ale tak jest ... to jeden z tych smutnych momentów, kiedy odkrywasz rzeczywistość, w której fiszki przestają działać. – vsync

Niesamowite dzięki za poświęcony czas i wysiłek. –

spróbuj dodać

position:relative

do swoich wersjach nadwozia. Kiedykolwiek pozycjonujesz cokolwiek absolutnie, potrzebujesz jednego z pojemników nadrzędnych, który ma być pozycjonowany względnie, ponieważ spowoduje to, że pozycja będzie ustawiona bezwzględnie względem względnego kontenera macierzystego.

Jak miałem żadnych elementów względnych, css nie będzie wiedział, co jest absolutnie div pozycja do i dlatego nie będzie wiedział, co ma 100% wysokości

Źródło

2013-01-08 15:01:48 Pete

Dziękuję za użyteczne informacje, chociaż musiałem umieścić float: pozostawiono na nim także do pracy :) – Nworks

Spuszczanie w lewo było w oryginalnym kodzie i nie robi różnicy: http://jsfiddle.net/rvKPq/3/ – Pete

Dla każdego, kto czyta: Myślę, że to powinna być poprawna odpowiedź (i mieć wyższy wynik), ponieważ to było pierwsze poprawnie dostarczają rozwiązania i dodają wyjaśnienie do rozwiązania, a nie tylko wklejenie kodu. –

Niewiele odpowiedzi dało rozwiązanie z wysokością i szerokością 100%, ale zalecam nie używać procentu w css, używać pozycjonowania góra/dół i lewo/prawo.

To jest lepsze podejście, które pozwala kontrolować margines.

Oto kod:

body { 
    position: relative; 
    height: 3000px; 
} 
body div { 

    top:0px; 
    bottom: 0px; 
    right: 0px; 
    left:0px; 
    background-color: yellow; 
    position: absolute; 
}

Źródło

2013-01-08 15:08:04

To jest rozwiązanie, które zadziałało dla mnie. Nigdy nie wiedziałem, że możesz rozciągnąć obraz po pozycji. –

Kompletna rozciąganie (poziomo/pionowo)

Zaakceptowanych odpowiedź jest wielki. Chcę tylko wskazać pewne rzeczy dla innych, którzy tu przyjeżdżają. Marginesy nie są konieczne w takich przypadkach. Jeśli Oyu chcą scentralizowany układ z konkretnym „margines”, można dodać je na prawo i lewo, tak jak poniżej:

.stretched { 
    position: absolute; 
    right: 50px; top: 0; bottom: 0; left: 50px; 
    margin: auto; 
}

Jest to niezwykle użyteczne.

centrujący strefa (w pionie/poziomie)

Jako dodatek bezwzględnych centrującym, które może być wykorzystane, aby uzyskać bardzo proste centrowanie:

.centered { 
    height: 100px; width: 100px; 
    right: 0; top: 0; bottom: 0; left: 0; 
    margin: auto; 
    position: absolute; 
}

Źródło

2014-01-30 20:39:04

Inne rozwiązanie bez stosowania wysokość ale wypełnia 100% dostępnego wysokość. Zrealizuj to na przykład na codepen. http://codepen.io/gauravshankar/pen/PqoLLZ

Do tego html i body powinny mieć 100% wysokości. Ta wysokość jest równa wysokości widoku.

Wykonaj wewnętrzną pozycję div i podaj górną i dolną 0. Spełnia ona div do dostępnej wysokości. (Wysokość równa ciała.) Kod

HTML: Kod

<head></head> 

<body> 
    <div></div> 
</body> 

</html>

css:

* { 
    margin: 0; 
    padding: 0; 
} 

html, 
body { 
    height: 100%; 
    position: relative; 
} 

html { 
    background-color: red; 
} 

body { 
    background-color: green; 
} 

body> div { 
    position: absolute; 
    background-color: teal; 
    width: 300px; 
    top: 0; 
    bottom: 0; 
}

Źródło

2015-04-24 09:49:48 Gaurav

Zamiast body korzystając html pracował dla mnie:

html { 
    min-height:100%; 
    position: relative; 
} 

div { 
    position: absolute; 

    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
}

Źródło

2016-09-26 11:29:08 Misja

Ustaw wysokość 100% na podziałce bezwzględnej

Odpowiedz

Kompletna rozciąganie (poziomo/pionowo)

centrujący strefa (w pionie/poziomie)

Powiązane problemy