div superiore appiccicoso con posizionamento assoluto
-
26-10-2019 - |
Domanda
Sto usando il posizionamento assoluto ad avere un riempimento div l'intera finestra del browser. Tuttavia, ho wan't a combinare questo con un div appiccicosa che a volte c'è ea volte no.
Per rendere le cose un po 'più chiaro, controlla questo jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS /
Voglio che il "top", "sinistra" e "subheader" per rimanere dove sono in ogni momento. Voglio anche il div "content" per riempire ciò che resta della finestra. Tuttavia, a volte voglio visualizzare il div "avviso" prima "contenuto". Fin qui tutto bene, come si può vedere nel jsFiddle. Ma, voglio "segnalazione" di aderire al "subheader" e rimanere lì durante lo scorrimento. Come si può vedere se si ridimensiona la finestra, "alert" sarà ora scorrere con "contenuti" -. Io non voglio che sia
Qualcuno ha un'idea di come risolvere questo?
EDIT: Ho fatto un cambiamento nella mia jsFiddle, ho messo la "segnalazione" dove dovrebbe essere (tra subheader e contenuti-zona). Come si può vedere ( http://jsfiddle.net/henrikandersson/aDdRS/12 ) lo fa non spingere il "contenuto-zona" giù dal contenuto-zona ha top: 20px. E non posso Set Top:. 40px ad esempio dal "avviso" dovrebbe essere in grado di variare in altezza e voglio contenuti-zona per avere lo stesso css, con o senza l'avviso di cui sopra
EDIT # 2: Questa domanda offerte con lo stesso problema, ma non v'è alcuna soluzione per questa domanda sia. Sembra non è possibile senza l'utilizzo di JavaScript: scorrimento div, posizionato rispetto fratelli altezza variabile
Soluzione 6
I chose to go with a JavaScript approach after all. Would have preferred a pure CSS approach but my need for IE8 support stood in the way. This answer by Myles Gray is pretty much what I did - https://stackoverflow.com/a/4933509/940517
Altri suggerimenti
2018-6-18
I choose the CSS way with position: sticky
.
that https://github.com/abouolia/sticky-sidebar .
doesn't work for me (I am using Vue.js 2.0 SPA with vue-router & vuex)
I also want the element position: absolute
first,
and then position: sticky
Solution
- parent HTML element use
position: absolute
to have the right position.
(don't forget to set height
for parent. for example height:100%
)
- child HTML element
position: sticky
edit
update with some enhancements
http://jsfiddle.net/aDdRS/11/
first post
Why not scroll just the .content
and not the .content-area
- Add fixed height & width 100% to alert + position:fixed
- Add padding-top to content
- Only downfall is of course the extra padding if there is no alert...
The alert scrolls with the content because it's inside the content-area which has overflow-y: auto
.
Move it out of the content-area (put it in between subheader and content-area), and remove the position: absolute
(and top/left/right/bottom) attributes from the content. In that example I see no reason for content to be absolute-positioned, normal flow will put it where it wants to be.
Use float: left; and width: 0; and you can use transform: translateX(xxx); for set left position.
Problem solved :)