Position Absolute + Scrolling

Mit folgenden HTML und CSSPosition Absolute + Scrolling

.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>

Die inneren div den vollen Kopf des Behälters einnimmt, wie gewünscht. Wenn ich nun einen anderen, Durchfluss-, Gehalt an den Behälter hinzuzufügen, wie zum Beispiel:

.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>

des Behälter scrollt dann wie gewünscht, aber das absolut positioniertes Element ist nicht mehr an die Unterseite der verankerten Behälter, stoppt aber am anfänglich sichtbaren Boden des Behälters. Meine Frage ist; Gibt es eine Möglichkeit, das absolut positionierte Element in der vollständigen Höhe seines Containers zu verwenden, ohne JS zu verwenden?

Quelle

2013-07-15 Chris Meek

könnte ich fragen, warum Sie haben top: 0; dort genauso ? –

kein besonderer Grund, ich habe eine Angewohnheit, Dinge zu spezifizieren –

Wenn Sie 'top: 0; entfernen', funktioniert es einfach nicht mehr. – Brewal

Sie müssen den Text in ein div Element einfügen und das absolut positionierte Element darin einfügen.

<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%; }

Einstellen der Position des inneren div zu relative macht die absolut Positionselemente in der es ihre Position und Höhe der Basis auf sie anstatt auf dem .container div, die eine feste Höhe hat . Ohne das innere, relativ positionierte div berechnet das .full-height div immer seine Abmessungen und Position basierend auf .container.

http://jsfiddle.net/M5cTN/

Quelle

2013-07-15 14:59:06 giaour

Das macht natürlich auch Sinn (in der Art, wie CSS Sinn macht;)) –

Das 'Füllhöhen'-Element scrollt klar mit dem Inhalt, wollte das OP es nicht verankern? (Durch Ändern des blauen Hintergrunds in ein Hintergrundbild, können Sie sehen, was ich meine, wenn ich sage, dass es nicht verankert ist http://jsfiddle.net/M5cTN/82/) – paulvs

vielen Dank. nach stundenlanger Suche gefunden ... –

position: fixed; wird Ihr Problem lösen. Als Beispiel meine Implementierung eines festen Nachrichtenbereich Overlay (bevölkerten programmatisch) Bewertung:

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

Und im HTML

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

Wenn #data länger tha der sceen, #mess behält seine Position auf der Bildschirm, während #data darunter scrollt.

Quelle

2014-09-28 21:46:51 flaschbier

+24

Bei der festen Positionierung wird das Element relativ zum Browser positioniert, was möglicherweise nicht das gewünschte Ergebnis ist. –

Wenn Sie keine obere, linke, rechte, untere Position angeben, wird das feste Element nicht relativ zum Fenster positioniert. Aber das hat natürlich eine begrenzte Verwendung, nur zur Standardposition links oben, sonst wird es relativ zum Fenster positioniert, es hat auch einen weiteren Nachteil, Breite: 100% oder Höhe: 100% entspricht der Fenstergröße –

Also gaiour ist richtig, aber wenn Sie für eine volle Höhe Artikel suchen, die nicht mit dem Inhalt scrollt, aber ist eigentlich die Höhe des Containers, hier ist der Fix. Haben Sie einen Elternteil mit einer Höhe, die einen Überlauf verursacht, dann kann ein Inhaltscontainer mit einer Höhe von 100% und overflow: scroll und ein Geschwister entsprechend der Elterngröße und nicht der Größe des Scrollelements positioniert werden. Hier ist die Geige: http://jsfiddle.net/M5cTN/196/

und der entsprechende Code:

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%; 
}

Quelle

2015-03-20 20:47:42 TorranceScott

Position Absolute + Scrolling

Antwort

Verwandte Themen