Gibt es eine CSS-Min-Top-Eigenschaft

Gibt es eine CSS-Eigenschaft wie Min-Höhe, aber für Top? In dem Beispiel unten, wenn ich div1 (über Javascript) ausblenden, möchte ich div2 oben haben: 50. Andernfalls unter div1 zu platzieren.Gibt es eine CSS-Min-Top-Eigenschaft

<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: wie ich weiter unten

beantwortet Wenn div1 versteckt ist nicht i div2 genau unter div1 sein wollen. div1 als treeview vorstellen, die jede Höhe haben kann (oder sogar ausgeblendet) und div2 als Absatz, der immer unter 50px

Quelle

2013-03-21 Thanos Darkadakis

Sie meinen 'margin-top' o r 'padding-top'? –

Ich sehe, dass diese Frage noch zu kommentieren hat viele Ansichten und die Menschen sind immer noch.Aufgrund der Tatsache, dass die Frage nicht vollständig beantwortet, so habe ich beschlossen, hier die vollständige Antwort zu schreiben:

entsprechende CSS:

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

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

Ergebnisse

Wenn Div1 ausgeblendet ist, hat Div2 eine Top-Eigenschaft von 50px
Wenn div1 nicht verborgen ist:
- Wenn div1 Höhe von weniger als 50 Pixel ist, dann ist div2
- bei 50px platziert Wenn div1 Höhe mehr als 50px ist, dann ist div2 rechts unter div1

Quelle

2016-05-25 09:44:04

Nein sein sollte, es gibt nichts wie min-top

Stattdessen können Sie verwenden, ist

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

Und für das Beispiel, das Sie visibility: hidden; am besten hier geeignet gezeigt wird, wie er in den Raum Ihres versteckt div

Quelle

2013-03-21 16:00:28

Wenn ich das tue, dann wird div2 oben haben: 150 wenn div1 nicht versteckt ist (immer 50 mehr als div1) und oben: 50 wenn div1 id versteckt ist. Wenn Div1 nicht versteckt ist, möchte ich, dass Div2 genau unter Div1 liegt. Stellen Sie sich div1 als eine Baumansicht, die eine beliebige Höhe haben kann und div2 als einen Absatz, der immer unter 50px sein sollte –

@ThanosDarkadakis JS ist die einzige Option, sonst verwenden Sie "Sichtbarkeit: versteckt" zu verstecken sowie Speicherplatz für das Element –

I reservieren vermuten, dass dies den Trick für Sie tun, aber ich glaube, es ist nicht eine sehr gute Praxis ist:

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

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

(. Nur Kommentar/Kommentar- der display:none es Arbeit zu sehen)

Quelle

2013-03-21 16:50:46 xpy

gibt es ein Problem, wenn ich zu viel Zeug in Div1 schreibe. Demo hier überprüfen: http: //jsfiddle.net/tbbvU/2/ –

Problem gelöst, wenn Sie ersetzen "Höhe: 100px" mit "min-Höhe: 50px" –

Ich kam mit dieser Lösung, die den oberen verwendet: 0 unten: 0 Hack.

Wir schaffen einen Behälter in der Höhe ist es relativ Eltern (falls vorhanden) - wir dies dann einen min-height geben (zB Ihr min-top)

Wir positionieren dann das eigentliche Element unbedingt auf den Grund zu diesem Thema Container.

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>

Quelle

2016-01-14 16:25:46 JRT

Es funktioniert nicht, wenn die Mindesthöhe ist weniger als die Höhe von das Fenster http://jsfiddle.net/gxp05jk5/ –

Sorry, nicht sicher, ob ich dein Problem verstehe, kannst du das genauer erklären? – JRT

Das Problem wurde mit der Antwort von xpy mit meinem Kommentar auf seine Antwort gelöst –

$(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>

Quelle

2018-01-15 14:55:19

Gute Antwort, aber ein wenig Erklärungstext wäre nett – Yannjoel

Gibt es eine CSS-Min-Top-Eigenschaft

Antwort

Verwandte Themen