posizione css: relativo; attaccare al fondo

<body style="min-height:2000px;"> 
    <div id="test" style="position:relative;bottom:0;"> 
     some dynamically changed content 
    </div> 
</body>

Cosa mi aspetto:
-Se #test altezza è maggiore o uguale al corpo deve attenersi a fondo (come avviene ora cuz del modello blocco)
-Se #test altezza è inferiore di quello del corpo dovrebbe comunque rimanere attaccato al fondo, avendo lo spazio bianco sopra di esso. (che non succede, #test non si attacca al fondo).posizione css: relativo; attaccare al fondo

-Utilizzo posizione: assoluto non è accettabile come allora #test non influenzerà l'altezza del corpo quando #test è superiore corpo.
-Uso posizione: corretto non è accettabile come allora #test si attaccherà alla fine della finestra, non al corpo.

D: Posso ottenere quello che mi aspetto utilizzando solo CS? Come?

Ci scusiamo per l'inglese scarso, tuttavia penso che la domanda sia facile da capire.
Grazie.

P.S .: Ho bisogno di questo in css perché alcuni contenuti modificati dinamicamente vengono modificati tramite js e voglio evitare di ricalcolare la posizione div #test ogni volta che cambia.

UPD:

Ho anche provato un po 'di roba display:inline-block; vertical-align:bottom; ancora nessun risultato.

UPD2:

Grazie ragazzi, ancora a quanto pare, in questo modo più semplice è solo per aggiungere un paio di righe al mio javascript per ricalcolare l'altezza del corpo sulla #test dislivello.

fonte

2013-07-08 sander

Suppongo che tu stia cercando footer sticky .. –

Se stai davvero cercando il footer sticky prova questo - http://mystrd.at/modern-clean-css-sticky-footer/. La soluzione migliore finora – jQuery00

I haven Non ho incontrato nessuna soluzione "sticky footer" senza posizione: fissa o postazione: assoluta. Mi chiedo, se ce ne sono. – sander

#footer{ 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    background:#999; 
} 
/* IE6 */ 
* html #footer{ 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
}

JSFiddle: http://jsfiddle.net/As3bP/ - posizione: fissa; è il modo più ovvio per farlo, e se questo influisce sul layout, prova a postare qui i tuoi problemi. Sarebbe più semplice modificare il CSS dei tuoi contenuti piuttosto che cercare un altro modo per farlo.

L'espressione IE6 non è buono per la velocità a tutti, ma funziona, leggere su che qui: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html

EDIT Leggere le modifiche, si prega di dimenticare il sopra. Per essere bloccato nella parte inferiore del corpo, sarebbe facile posizionarlo nel tuo HTML. Questa è roba semplice, per favore inserisci il codice di esempio se hai bisogno di ulteriore aiuto. Posizionando qualcosa nella parte inferiore della pagina, per impostazione predefinita, le posizioni nella parte inferiore della pagina.

JSFiddle: http://jsfiddle.net/TAQ4d/ se davvero ne hai bisogno.

fonte

2013-07-08 07:36:29

Proverò a spiegare: 1) prendere il codice dalla mia domanda.2) Cambia posizione: relativa alla posizione: assoluta. # test si attacca al fondo del corpo, va bene. 3) Aggiungi "height: 3000px" allo stile di # test. È ancora sul fondo del corpo (buono), ma il corpo è ancora 2000px e 1000px di #test è nascosto sopra il corpo (che è cattivo); – sander

risposta breve: No NON puoi farlo con puro css perché è solo la direzione inversa al normale flusso di pagina (ii significa dal basso verso l'alto);
è possibile utilizzare questo plugin che è molto facile da usare stickyjs;
lo uso con bottomSpacing: 0

EDIT
questo plgin usese posizione fissa troppo!
allora penso che si dovrebbe scrivere in giù da soli o avere qualcuno a scrivere per voi: D

fonte

2013-07-08 07:39:48 Homam

Avevo paura di quello. Ora ho bisogno di aggiungere più calcoli al mio js. – sander

e per quanto ne so non c'è qualcosa di simile a – Homam

@sander, è possibile utilizzare html5 e css3. controlla la mia risposta –

se u non vuole utilizzare position:absolute; left:0; bottom:0; poi u può provare semplice margin-top:300px; ...

fonte

2013-07-08 08:20:04

Ecco cosa farò ora. Finché l'altezza #test cambia dinamicamente, dovrò farlo con JS. – sander

Gli unici due puro modi -CSS per creare piè di pagina appiccicoso di altezza dinamica che conosco utilizzano flexboxes (nessun supporto in IE9-, purtroppo) e l'utilizzo di CSS tables:

html, body { 
    height: 100%;  
    margin: 0; 
} 
body { 
    display: table; 
    width: 100%; 
    min-height:2000px; 
} 
#test { 
    display: table-footer-group; 
    height: 1px; /* just to prevent proportional distribution of the height */ 
}

fonte

2013-07-08 08:27:34

e 'molto possibile usando relative posizione. questo è come lo fai

Assumere altezza del piedino sarà 40 px. Il tuo contenitore è relative e il piè di pagina è anche relative. Tutto quello che devi fare è aggiungere bottom: -webkit-calc(-100% + 40px);. il tuo footer sarà sempre nella parte inferiore del tuo contenitore.

HTML sarà così

<div class="container"> 
    <div class="footer"></div> 
</div>

CSS sarà come questo

.container{ 
    height:400px; 
    width:600px; 
    border:1px solid red; 
    margin-top:50px; 
    margin-left:50px; 
    display:block; 
} 
.footer{ 
    width:100%; 
    height:40px; 
    position:relative; 
    float:left; 
    border:1px solid blue; 
    bottom: -webkit-calc(-100% + 40px); 
    bottom:calc(-100% + 40px); 
}

Live example here

Spero che questo aiuti.

fonte

2015-02-06 12:20:43

A causa dell'altezza dinamica di #test, non è possibile farlo con il solo CSS. Tuttavia, se si sta già utilizzando jQuery, una chiamata veloce .height() dovrebbe essere in grado di ottenere ciò di cui si ha bisogno (l'altezza #test deve essere sottratta dal posizionamento di 2000px dall'alto).

<style> 
body { 
    min-height: 2000px; 
} 

#test { 
    position: relative; 
    top: 2000px; 
} 
</style> 

<script> 
var testHeight = $("#test").height(); 
$("#test").css({ 
    margin-top: -testHeight; 
}); 
</script>

fonte

2015-04-22 05:53:12 Durthar

Sì, è posiible con i CSS solo:

HTML:

<body> 
    <div id="test"> 
     some dynamically 
     changed content 
    </div> 
</body>

CSS:

body{ 
    line-height: 2000px; 
} 

#test{ 
    display: inline-block; 
    vertical-align: bottom; 
    line-height: initial; 
}

JSFiddle

Se si desidera avere il testo sulla parte inferiore dello schermo, è possibile utilizzare:

body { 
    line-height: 100vh; 
    margin: 0px; 
}

fonte

2016-04-21 08:23:08 CHlM3RA

-1

Facciamo così:

Html:

<body> 
    <div id="bodyDiv"> 
     <!-- web site content is here --> 
    </div> 
</body> 
<footer> 
    <!-- Footer content is here --> 
</footer>

Jquery:

$(document).ready(function() 
{ 
    $('#bodyDiv').css("min-height",screen.height); 
});`

modifica dinamicamente l'attributo min-height dell'elemento del contenuto in base alla risoluzione dello schermo.

fonte

2016-05-12 10:38:24

so che è una vecchia questione, ma si potrebbe provare a fare:

top: 100%; 
transform: translateY(-100%);

Transform opera con le dimensioni dell'elemento stesso, quindi salirà di nuovo al contenitore in fondo. Puoi usare le lettere per tutti e 3 gli assi.

fonte

2016-06-16 13:58:54

qui sono la soluzione vengo con

<ul class="navbar"> 

    <li><a href="/themes-one/Welcome"> Welcome <i></i></a></li> 
    <li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li> 
    <li><a href="/themes-one/Services"> Services <i></i></a></li> 
    <li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i> 
     <ul class="subMenu"> 
      <li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li> 
      <li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li> 
      <li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li> 
     </ul> 
    </li> 
    <li><a href="/themes-one/About"> About <i></i></a></li> 
    <li><a href="/themes-one/Contact"> Contact <i></i></a></li> 
    <li><a href="/themes-one/Estimate"> Estimate <i></i></a></li> 


</ul> 

<style> 

    .navbar { 
     display: block; 
     background-color: red; 
     height: 100px; 
    } 

    li { 
     display: table-cell; 
     vertical-align: bottom; 
     height: 100px; 
     background-color: antiquewhite; 
     line-height: 100px; 
    } 

    li > a { 
     display: inline-block; 
     vertical-align: bottom; 
     line-height:initial; 
    } 

    li >ul { 
     display: none; 
    } 


</style>

fonte

2017-07-02 10:00:45

-1

Vecchio palo, lo so, ma un'altra soluzione potrebbe essere quella di creare un wrapper per il contenuto con un'altezza minima di 100VH - footerHeight questa soluzione richiede che si conosce l'altezza del piè di pagina ...

<body> 
    <div class="wrapper"> 
    your content 
    </div> 
    <div class="footer"> 
    footer content 
    </div> 
</body>

e il CSS sarebbe simile a questa:

.wrapper { 
    min-height: calc(100vh - 2em); 
} 
.footer { 
    height: 2em; 
}

fonte

2017-08-24 22:46:07 user2625636

posizione css: relativo; attaccare al fondo

risposta

Problemi correlati