pozycja bezwzględna + przewijania

z następującym HTML i CSSpozycja bezwzględna + przewijania

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
    </div> 
 
</div>

Wewnętrzna div zajmuje całą głowicę pojemnika według potrzeb. Jeśli teraz dodać inne, przepływu zawartości z pojemnika, takiego jak:

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
</div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus 
 
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate 
 
    placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. 
 
</div>

Następnie zwoje pojemnika według potrzeby, jednakże całkowicie umieszczony element jest już przymocowany do dnie pojemnik, ale zatrzymuje się na początkowym, widocznym dnie pojemnika. Moje pytanie brzmi; czy istnieje sposób na to, aby absolutnie pozycjonowany element był całkowitą wysokością przewijania swojego kontenera bez używania JS?

Źródło

2013-07-15 Chris Meek

mogę zapytać, dlaczego masz top: 0; tam też ? –

bez szczególnego powodu, mam zwyczaj nadmiernego określania rzeczy –

Jeśli usuniesz 'top: 0;' to po prostu już nie działa. – Brewal

Musisz zawinąć tekst w element div i umieścić w nim absolutnie umieszczony element.

<div class="container"> 
    <div class="inner"> 
     <div class="full-height"></div> 
     [Your text here] 
    </div> 
</div>

CSS:

.inner: { position: relative; height: auto; } 
.full-height: { height: 100%; }

Ustawianie pozycji śródmiejskiego div do relative sprawia absolutnie elementy położeniu wewnątrz niego oprzeć swoją pozycję i wysokość na nią niż na .container div, która ma stałą wysokość . Bez wewnętrznego, względnie umieszczonego div div zawsze będzie obliczał swoje wymiary i pozycję na podstawie .container.

http://jsfiddle.net/M5cTN/

Źródło

2013-07-15 14:59:06 giaour

Oczywiście, że faktycznie ma również sens (w sposób, który ma sens w CSS;)) –

Element 'fill-height' jest wyraźnie przewijany treścią, czy OP nie chciał go zakotwiczyć? (Zmieniając niebieskie tło na obraz w tle, możesz zobaczyć, co mam na myśli mówiąc, że nie jest zakotwiczony http://jsfiddle.net/M5cTN/82/) – paulvs

wielkie dzięki. znalazłem twoje rozwiązanie, po godzinach wyszukiwania ... –

position: fixed; rozwiąże Twój problem. Jako przykład, sprawdź moje wykonanie nakładki ustalony obszar wiadomość (zaludnionych programowo):

#mess { 
    position: fixed; 
    background-color: black; 
    top: 20px; 
    right: 50px; 
    height: 10px; 
    width: 600px; 
    z-index: 1000; 
}

I w HTML

<body> 
    <div id="mess"></div> 
    <div id="data"> 
     Much content goes here. 
    </div> 
</body>

Kiedy #data staje się już tha na sceen, #mess utrzymuje swoją pozycję na ekran, a pod nim przewija się #data.

Źródło

2014-09-28 21:46:51 flaschbier

+24

Naprawiono pozycjonowanie pozycjonuje element względem przeglądarki, co może nie być pożądanym rezultatem. –

jeśli nie określisz górnej, lewej, prawej, dolnej pozycji element stały nie zostanie umieszczony względem okna. Ale to oczywiście ogranicza użytkowanie, tylko do domyślnego lewego górnego położenia, w przeciwnym razie będzie umieszczone w stosunku do okna, ma również inną wadę, szerokość: 100% lub wysokość: 100% będzie takie samo jak wymiary okna –

Więc gaiour ma rację, ale jeśli szukasz produktu o pełnej wysokości, który nie przewija treści, ale faktycznie jest wysokością kontenera, oto poprawka. Niech rodzic ma wysokość, która powoduje przepełnienie, kontener treści o wysokości 100% i overflow: scroll, a następnie można ustawić rodzica zgodnie z rozmiarem rodzica, a nie wielkością elementu przewijania. Oto skrzypce: http://jsfiddle.net/M5cTN/196/

i odpowiedni kod:

html:

<div class="container"> 
    <div class="inner"> 
    Lorem ipsum ... 
    </div> 
    <div class="full-height"></div> 
</div>

css:

.container{ 
    height: 256px; 
    position: relative; 
} 
.inner{ 
    height: 100%; 
    overflow: scroll; 
} 
.full-height{ 
    position: absolute; 
    left: 0; 
    width: 20%; 
    top: 0; 
    height: 100%; 
}

Źródło

2015-03-20 20:47:42 TorranceScott

pozycja bezwzględna + przewijania

Odpowiedz

Powiązane problemy