Set Breite: 100% in Bezug auf ein anderes Objekt für ein Objekt, die

Question

-Code festgelegt werden muss: https://jsfiddle.net/gsnfzn35/3/

Es ist ein bisschen flippig zu beschreiben, klicken Sie auf die Schaltfläche Toggle-Schublade. Eine herausziehbare Schublade auf der rechten Seite zeigt sich. Diese herausziehbare Schublade ist ein Behälter, hat aber 2 Schlüsselkomponenten. Die erste Komponente ist der gesamte Inhalt an der Spitze. Die letzte Komponente ist eine „fixed Reihe“ auf der Unterseite:

<div class="scroll-fixed-row" style="width:100%;text-align: right"> 
    <p> 
    FIXED FINAL ROW 
    </p> 
</div> 

Diese Zeile soll die Breite der ausziehbaren Schublade sein, was auch immer das Breite ist; NICHT die Breite des Bildschirms. Derzeit, wenn Sie Element mit der width:100% überprüfen, sehen Sie, dass die Breite die Breite des Bildschirms ist, nicht die Schublade herausziehen. Eine andere Möglichkeit, dies zu sehen, ist die Tatsache, dass wenn der Text width:100%;text-align:right ist, der Text außerhalb des Bildschirms rechts neben der Zeile angezeigt wird, die zu breit ist. Entfernen Sie die width:100% und Sie können den Text erneut sehen.

Ich schätze, das ist aufgrund der Tatsache, dass die scroll-fixed-row ist fest, und daher nimmt seine Breite aus dem Bildschirm, nicht die Schublade herausziehen. Aber das ist behoben, weil das scroll-fixed-row auf der Unterseite bleiben muss, obwohl der Rest der Schublade scrollt. Wie kann ich unter dieser Einschränkung die Breite des scroll-fixed-row für die Breite des Auszugsfachs für jeden Bildschirm (volle Reaktionsfähigkeit) festlegen, OHNE dass eine spezifische Breite in Pixeln basierend auf Medienabfragen bereitgestellt werden muss?

Der Grund ich frage dies, weil ich die scroll-fixed-row in 2 „Abschnitten“ entweder eine Tabelle in einer Reihe Bootstrap Gitter und 2 <div class="col-xs-6"> Verwendung zu unterteilen möchte und 2 <td width="50%"> oder verwenden. In der aktuellen Implementierung (NICHT in der Fiddle) wird der Inhalt im zweiten Raster einfach von der Seite weggedrückt (das gleiche Problem ist jetzt), weil die Tabellenbreite vom Bildschirm erbt. Ich denke, ich kann diesen Teil herausfinden, wenn jemand mir helfen kann, diese Frage zu beantworten.

Answer 1

Die Breite kann mit inherit statt 100% gelöst werden, wird dies ein fixed Element .container.scroll die Breite des übergeordneten, in Ihrem Fall machen bekommen. Ich habe bemerkt, dass Sie Padding zum übergeordneten Element hinzugefügt haben, die vererbte Breite wird Paddings enthalten und so wird das Element fixed die Bildlaufleisten überlagern.

Code:

.scroll-fixed-row { 
    position: fixed; 
    text-align: right; 
    background-color: white; 
    border-top: 1px solid black; 
    width: inherit; /* get width from parent */ 
    bottom: 0; /* stick to bottom */ 
    right: 0; /* fix offset caused by padding */ 
} 

Eine andere Sache, die ich, dass in Ihrem Code aufgefallen ist, dass Sie margin-top: 70px auf .scroll verwenden es von dem festen roten nav zu kompensieren, dies bewirkt, dass der den unteren Teil, der aus Ansichtsfenster zu unsichtbar sein, insbesondere der untere Bildlaufpfeil. Ich habe es auf die veränderte folgende:

.scroll { 
    position: fixed; 
    top: 70px; /* offset from top (nav height) */ 
    height: calc(100% - 70px); /* calculate height minus the top offset */ 
} 

Wenn Sie das feste Element überlappen die Bildlaufleisten verhindern wollte, Sie pointer-events: none und fügen Sie eine weitere Wrapper in der HTML-Anwendung finden könnte, die einen 15px Abstand wie der Inhalt bekommt, für bessere Konsistenz:

.scroll-fixed-row { 
    ... 
    pointer-events:none; /* disables mouse functionality to enable scrollbar control */ 
} 

.scroll-fixed-row .inner { 
    border-top:2px solid red; 
    background:lightblue; 
    margin:0 30px 0 15px; 
    pointer-events:auto; /* allows mouse functionality */ 
} 

jsFiddle Demo - Scrollbar Überlappung: https://jsfiddle.net/azizn/guufj4a0/

jsFiddle Demo - zusätzliche Wrapper: https://jsfiddle.net/azizn/d6wwk51b/