vertikale Ausrichtung Ausgaben

Kann mir jemand sagen, was ich hier falsch mache? Ich habe einen Wrapper bei 100% und zwei Divs drin. Das oberste div muss sich am Anfang des Wrappers befinden und das untere div muss sich am unteren Rand des Wrappers befinden. Es funktioniert nicht.vertikale Ausrichtung Ausgaben

Hier ist was ich habe. Ich habe versucht, vertikal auf beiden inneren divs auszurichten, aber es funktioniert auch nicht.

<style> 
#wrap { 
width:210px; 
height:100%; 
border:1px solid red; 
} 
#top { 
width:200px; 
height:100px; 
margin:0 auto 0 auto; 
border:1px solid green; 
} 
#btm { 
width:200px; 
height:100px; 
position:relative; 
bottom:0; 
margin:0 auto 0 auto; 
border:1px solid red; 
} 
</style> 
</head> 
<body> 
    <div id="wrap"> 
    <form method="post" action=""> 
     <div id="top"> 
adf 
     </div> 
     <div id="btm"> 
adf 
     </div> 
    </form> 
    </div> 
</body> 
</html>

Quelle

2010-11-18 Jim

welchen Browser verwenden Sie? Rendering-Engines sind nicht gleich gebaut, noch zu Spezifikationen .... –

Opera, Chrome und FF – Jim

Versuchen Sie folgendes:

#wrap{ 
width:210px; 
height:100%; 
border:1px solid red; 
position:relative; 
} 

#top { 
float:left; 
width:100%; 
height:100px; 
position:relative; 
margin:0 auto 0 auto; 
border:1px solid green; 
} 
#btm { 
float:left; 
width:100%; 
height:100px; 
position:relative; 
bottom:0; 
margin:0 auto 0 auto; 
border:1px solid red; 
}

Quelle

2010-11-18 20:42:17 wajiw

Danke wajiw. Es funktioniert immer noch nicht. :( – Jim

Können Sie beschreiben, was passiert in ein bisschen mehr Tiefe? – wajiw

@wajiw, Beide innere divs sind oben ausgerichtet, übereinander gestapelt – Jim

~~es zu funktionieren scheint, ich Stellung nahm: relative; Sie brauchen es nicht:~~

~~sehen sie hier: http://jsfiddle.net/kByXS/~~

edit: ich mißverstanden Ihr Problem:

hier ist es gelöst: http://jsfiddle.net/SebastianPataneMasuelli/kByXS/2/

html:

<div id="wrap"> 
    <form method="post" action=""> 
     <div id="top"> 
      top 
     </div> 
     <div id="btm"> 
      bottom 
     </div> 
    </form> 
</div>

css:

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    background-color: gray; 
} 
#wrap { 
    width:210px; 
    height:100%; 
    border:1px solid red; 
    position: relative; 
} 
#top { 
    width:200px; 
    height:100px; 
    margin:0 auto 0 auto; 
    border:1px solid green; 
} 
#btm { 
    width:200px; 
    height:100px; 
    margin:0 auto 0 auto; 
    border:1px solid blue; 
    position: absolute; 
    bottom: 0; 
left: 5px; 
}

Schlüssel:

geben den HTML und Körper 100% Höhe zuerst, dann wird Ihre div vertikal 100% dehnen.
geben Sie Ihren Behälter ein position: relative ohne links oder Spitzenwerte, div
geben Sie Ihrem Boden ein position: absolute (die es in Bezug auf den Behälter div macht), und bottom: 0;

Quelle

2010-11-18 20:44:54

Was ich sehe, ist ein Wrapper, der auf die gleiche Höhe wie die BTOM und Top Divs kombiniert ist.Es sieht in meinem Beispiel genauso aus wie in meiner Form. Mache die Höhe des Wrappers zu 100% und dann wirst du sehen, dass die inneren Divs übereinander gestapelt sind. – Jim

check oout das aktualisierte Beispiel, ich denke, das ist, was Sie wollen –

Ja Sebastian, das funktioniert. Vielen Dank. Ich habe jedoch eine Frage ... Ich kann meinem Formular keine 100% ige Höhe hinzufügen, da dies die gesamte Website strecken wird. Ich möchte nur eine 100% Höhe auf der Verpackung. Dieser Wrapper ist eine Seitenleiste innerhalb der Site. – Jim

In welchem Browser funktioniert es nicht ? Schaut mir in Chrome fein:

alt text

Quelle

2010-11-18 20:48:36

Paul, der Wrapper div ist 100%, was nicht durch Ihren Screenshot ersichtlich ist. Ich habe es gerade in FF und Chrome ausprobiert und es funktioniert nicht. – Jim

@Jim - Ich habe den von Ihnen gelieferten Code in eine Datei eingefügt, und der Screenshot zeigt, wie dieser Code in Chrome und Firefox wiedergegeben wird. Schaust du es in einem anderen Browser an, in dem '# wrap' größer ist als im Screenshot? Wenn ja, welcher Browser? –

Paul, ich habe FF, Chrome sowie Opera und es macht genau das gleiche in allen von ihnen. Ist dir bewusst, dass der Wrapper Div ** auf 100% Höhe liegen muss **? – Jim

vertikale Ausrichtung Ausgaben

Antwort

Verwandte Themen