Ik heb de volgende html …
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
en volgende CSS …
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
Maar waarom is de kop en voettekst niet opgelost, alles wat ik verkeerd heb gedaan? Ik wil alleen “hoofd” om schuifbare en “header” en “voettekst” te zijn om op een vaste positie te zijn. Hoe te doen?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
Zie deze fiddle
Antwoord 1, Autoriteit 100%
U moet expliciet breedte geven aan kop- en voettekst
width: 100%;
Als u wilt dat het middelste gedeelte niet wordt verborgen, geeft u position: absolute;width: 100%;op en stelt u de eigenschappen top and bottomin (gerelateerd aan kop- en voettekst heights) eraan toe en geef bovenliggend element position: relative. (natuurlijk, verwijder height: 700px;.) en om het scrollbaar te maken, geef overflow: auto.
Antwoord 2, autoriteit 98%
Mijn probleem was dat een bovenliggend element transform: scale(1);dit maakt het blijkbaar onmogelijk dat enig element erin fixedis. Door dat te verwijderen werkt alles normaal…
Het lijkt zo te zijn in alle browsers die ik heb getest (Chrome, Safari), dus ik weet niet of het afkomstig is van een vreemde webstandaard.
(Het is een pop-up die van scale(0)naar scale(1)gaat)
Antwoord 3, autoriteit 92%
Als een bovenliggende container transformatie bevat, kan dit gebeuren. probeer ze te becommentariëren
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
Antwoord 4, autoriteit 67%
Controleer nogmaals of je backface-visibilityniet hebt ingeschakeld voor een van de bevattende elementen, want dat zal position: fixedvernielen. Voor mij gebruikte ik een CSS3-animatiebibliotheek…
Antwoord 5, autoriteit 25%
Als u werkt met fixedof absolutewaarden,
het is een goed idee om de eigenschappen topof bottomen leftof right(of een combinatie daarvan) in te stellen.
Stel ook niet de heightvan het mainelement in (laat de browser de hoogte ervan instellen met topen bottomeigenschappen).
.header{
position: fixed;
background-color: #f00;
height: 100px;
top: 0;
left: 0;
right: 0;
}
.main{
background-color: #ff0;
position: fixed;
bottom: 120px;
left: 0;
right: 0;
top: 100px;
overflow: auto;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
Antwoord 6, autoriteit 17%
Ik had een soortgelijk probleem veroorzaakt door de toevoeging van een CSS-waarde voor perspectief in de body-CSS
body { perspective: 1200px; }
Vermoord
#mainNav { position: fixed; }
Antwoord 7, autoriteit 4%
Je bent vergeten de breedte van de twee divs toe te voegen.
.header {
position: fixed;
top:0;
background-color: #f00;
height: 100px; width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px; width:100%;
}
Antwoord 8, autoriteit 4%
Je hebt geen breedte of inhoud aan de elementen toegevoegd. Je moet ook opvulling boven en onder instellen op je hoofdelement, zodat de inhoud niet verborgen is achter de kop-/voettekst. Je kunt ook de hoogte verwijderen en de browser laten beslissen op basis van de inhoud.
.header{
position: fixed;
background-color: #f00;
height: 100px;
width:100%;
}
.main{
background-color: #ff0;
padding-top: 100px;
padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width:100%;}
Antwoord 9, Autoriteit 4%
U hebt geen breedte-set en er is geen inhoud in de DIV’s is één probleem. De andere is dat de manier waarop HTML werkt … wanneer alle drie gefixeerd, is dat de hiërarchie van onder naar boven gaat … dus de inhoud staat bovenop de koptekst, omdat ze allebei zijn opgelost … dus in dit geval U moet een Z-index op de header declareren … maar dat zou ik niet doen … laat die ten opzichte dat het normaal kan scrollen.
Go Mobile Eerst op deze … viemen hier
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS
html, lichaam {
Vulling: 0; marge: 0;
Hoogte: 100%;
}
.global-header {
width: 100%;
float: left;
min-height: 5em;
background-color: red;
}
.main-content {
width: 100%;
float: left;
height: 50em;
background-color: yellow;
}
.global-footer {
width: 100%;
float: left;
min-height: 5em;
background-color: lightblue;
}
@media (min-width: 30em) {
.global-header {
position: fixed;
top: 0;
left: 0;
}
.main-content {
height: 100%;
margin-top: 5em; /* to offset header */
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
}
} /* ================== */
Antwoord 10, autoriteit 4%
Dit kan een oud onderwerp zijn, maar in mijn geval was het de layout-waarde van css containeigenschap van het bovenliggende element dat het probleem veroorzaakte. Ik gebruik een framework voor hybride mobiel dat deze eigenschap containin de meeste van hun componenten gebruikt.
Bijvoorbeeld:
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Verwijder gewoon de waarde layoutvan de eigenschap containen de vaste inhoud zou moeten werken!
.parentEl {
contain: size style;
}
Antwoord 11, autoriteit 4%
Een andere oorzaak kan een bovenliggende container zijn die de eigenschap CSS animationbevat. Dat was het voor mij.
Antwoord 12, autoriteit 4%
Voor iedereen die dit probleem voornamelijk met navigatiebalken heeft en niet bovenaan blijft, ontdekte ik dat als een element in de bovenliggende container van het positon: fixed;-element een breedte heeft die groter is dan 100% – dus horizontale schuifbalken maken – dat is het probleem.
Om het op te lossen, stelt u het ‘ouderelement’ in op oveflow-x: hidden;
Antwoord 13
We zullen mensen nooit overtuigen om IE6 te verlaten als we ernaar blijven streven om kwaliteitswebsites aan die gebruikers te leveren.
Alleen IE7+ begreep “positie: vast”.
https://developer.mozilla.org/en-US/ docs/Web/CSS/position
Dus je hebt pech voor IE6. Probeer dit om de footer semi-sticky te krijgen:
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
Je zou misschien ook een iFrame kunnen gebruiken.
Hierdoor wordt voorkomen dat de voettekst onder aan de pagina ‘opstijgt’. Als u meer dan één pagina met inhoud heeft, wordt deze uit de site gedrukt.
Op een filosofische noot zou ik IE6-gebruikers liever verwijzen naar http://browsehappy.com/en geld uitgeven de tijd die ik het hacken voor IE6 op iets anders bespaar.