Esiste una proprietà min-top css

Esiste una proprietà css come min-height, ma in alto? Nell'esempio seguente, quando nascondo div1 (tramite javascript), voglio div2 avere il massimo: 50. Altro, da posizionare sotto div1.Esiste una proprietà min-top css

<html> 
<head> 
<style> 
#div1 
{ 
height:100px; 
} 
#div2{ 
//min-top:50px; 
} 
</style> 
</head> 

<body> 
<div id='div1'>This div may be hidden</div> 
<div id='div2'>This div must not be placed above 50px</div> 
</body> 
</html>

Edit: come ho risposto di seguito

Quando div1 non è nascosto voglio div2 essere esattamente sotto div1. immaginare div1 come vista ad albero che può avere qualsiasi altezza (o anche essere nascosto) e div2 come un paragrafo che dovrebbe sempre essere al di sotto 50px

fonte

2013-03-21 Thanos Darkadakis

Vuoi dire 'margin-top' o r 'padding-top'? –

vedo che questa domanda ha ancora molti punti di vista e le persone sono ancora commentando.A causa del fatto che la questione non è completamente risolta, ho deciso di scrivere qui la risposta completa:

appropriato css:

#div1 { 
    min-height:50px; 
    background-color: #fee; 
    margin-bottom:-50px; 
} 
#div2 { 
    margin-top:50px; 
    background-color: #efe 
}

http://jsfiddle.net/vVsAn/5051/

Risultati

Quando div1 è nascosto, div2 ha una proprietà superiore di 50px
Quando div1 non è nascosto:
- Se div1 altezza è inferiore a 50px, quindi div2 è posto a 50px
- Se div1 altezza è più di 50px, quindi div2 è posto proprio sotto div1

fonte

2016-05-25 09:44:04

Non c'è niente come min-top

Invece è possibile utilizzare è

div { 
    position: relative; 
    top: 50px; 
}

E per l'esempio che mostrato visibility: hidden; sarà più adatto qui, come sarà prenotare lo spazio della tua nascosta div

fonte

2013-03-21 16:00:28

se faccio questo, allora div2 avrà il massimo: 150 quando div1 non è nascosto (sempre 50 più di div1) e superiore: 50 quando l'ID div1 è nascosto. Quando div1 non è nascosto voglio div2 esattamente esattamente sotto div1. immagina div1 come una vista ad albero che può avere qualsiasi altezza e div2 come un paragrafo che dovrebbe sempre essere inferiore a 50px –

@ThanosDarkadakis JS è l'unica opzione che usa 'visibilità: nascosta' da nascondere così come lo spazio di riserva per l'elemento –

I sospetto che questo farà il trucco per voi, ma credo che non è una pratica molto buona:

#div1 
{ 
    height:100px; 
    outline: 1px solid red; 
    margin-bottom:-50px; 
} 
#div2{ 
    margin-top:50px; 
    outline: 1px solid blue; 
}

DEMO: http://jsfiddle.net/pavloschris/tbbvU/

(. Basta commentare/decommentare la display:none per vedere il lavoro)

fonte

2013-03-21 16:50:46 xpy

c'è un problema quando scrivo troppe cose in div1. controlla la demo qui: http: //jsfiddle.net/tbbvU/2/ –

problema risolto se sostituisci "height: 100px" con "min-height: 50px" –

Mi è venuta in mente questa soluzione che utilizza la parte superiore: 0 in basso: 0 hack.

Creiamo un contenitore all'altezza del suo genitore relativa (se presente) - abbiamo poi dare a questo un min-height (ad esempio il min-top)

Abbiamo poi posizionare l'elemento effettivo assolutamente a fondo su questo contenitore.

CSS:

.container { 
    position:absolute; 
    bottom:0px; 
    top: 0; 
    min-height: 700px; //Adjust this to your MINIMUM (eg your min-top) 
} 

.position-me { 
    position: absolute; 
    bottom: 0; 
}

HTML:

<div class="container"> 
    <div class="position-me">Great!</div> 
</div>

fonte

2016-01-14 16:25:46 JRT

Non funziona quando l'altezza minima è inferiore all'altezza di la finestra http://jsfiddle.net/gxp05jk5/ –

Scusa, non sono sicuro di aver capito il tuo problema, puoi spiegarlo in modo più dettagliato? – JRT

Il problema è stato risolto con la risposta di xpy con il mio commento sulla sua risposta –

$(window).on("resize", function() { 
 
    if ($('#div1').css('display', 'none')){ 
 
    \t $("#div2").addClass('minTop'); 
 
\t } else if ($('#div1').css('display', 'block')){ 
 
\t \t $("#div2").removeClass('minTop'); 
 
\t } 
 
}).resize();

#div1{ 
 
width:100px; 
 
height:100px; 
 
background-color:#ff0000; 
 
position:absolute; 
 
display:block; 
 
/* display:none; */ 
 
} 
 
#div2{ 
 
width:100px; 
 
background-color:#ffff00; 
 
top:150px; 
 
position:absolute; 
 
} 
 
#div2.minTop{ 
 
    top:50px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 
<div id='div1'>div 1</div> 
 
<div id='div2'>div 2</div> 
 
</body> 
 
</html>

fonte

2018-01-15 14:55:19

Buona risposta, ma un piccolo testo di spiegazione sarebbe bello – Yannjoel

Esiste una proprietà min-top css

risposta

Problemi correlati