Verschieben div an den unteren Rand des Bildschirms mit CSS-Transformation

Ich möchte ein div an den unteren Rand des Bildschirms verschieben. Die übersetzen Eigenschaft bewegt sich nur die div in Bezug auf seine Größe:Verschieben div an den unteren Rand des Bildschirms mit CSS-Transformation

<html> 
    <body> 
    <div class="test"></div> 
    </body> 
</html> 

html, body{ 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

.test{ 
    height: 25%; 
    width: 100%; 
    transform: translate(0,100%); 
    background: blue; 
}

dies die div nach unten um 100% bewegt davon Höhe (25% des Bildschirms) ist. Wie kann ich das div an den unteren Bildschirmrand verschieben?

http://codepen.io/anon/pen/dXWGAm

Quelle

2016-06-30 ManuKaracho

Verwenden vh statt % festgelegt ist, auf diese Weise sie es 75% auf der Höhe des Bildschirms bewegt, so dass die andere 25% für dein div.

Ich würde Ihnen auch empfehlen, die Höhe Ihres div zu 25vh zu ändern, um sicherzustellen, dass es auf der Unterseite sitzt.

html, 
 
body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.test { 
 
    height: 25vh; 
 
    width: 100%; 
 
    transform: translate(0, 75vh); 
 
    background: blue; 
 
}

<html> 
 

 
<body> 
 
    <div class="test"></div> 
 
</body> 
 

 
</html>

Quelle

2016-06-30 09:41:56

'transform: translate (0, calc (100vh - 25%))' kann nicht davon ausgehen, dass '%' gleich 'vh' ist. –

@Mr_Green guter Punkt - so habe ich einen Kommentar hinzugefügt, dass es besser wäre, die Höhe von 25% auf 25vh zu ändern –

können Sie position:absolute verwenden und bottom:0px machen; anstatt Eigenschaft umzuwandeln.

html, body{ 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.test{ 
 
    height: 25%; 
 
    width: 100%; 
 
    position:absolute; 
 
    bottom:0px; 
 
    background: blue; 
 
}

<body> 
 
    <div class="test"></div> 
 
    </body>

Quelle

2016-06-30 09:41:13

Wie gesagt, ich möchte transform: translate(); – ManuKaracho

Gibt es Eltern von diesem div? –

position:absolute ist der beste Weg, wie diese

html, body{ 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.test{ 
 
    height: 25%; 
 
    width: 100%; 
 
    background:#000; 
 
    position:absolute; 
 
    left:0; 
 
    bottom:0; 
 
}

<html> 
 
    <body> 
 
    <div class="test"></div> 
 
    </body> 
 
</html>

Aber wie Sie speziell benötigen transform Verwendung dieses

html, body{ 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.test{ 
 
    height: 25%; 
 
    width: 100%; 
 
    background:#000; 
 
    transform:translate(0,75vh); 
 
}

<html> 
 
    <body> 
 
    <div class="test"></div> 
 
    </body> 
 
</html>

Als Ihre Höhe 25% kein Problem mit 75vh

Quelle

2016-06-30 09:41:19

Wie gesagt, ich möchte transform: translate(); – ManuKaracho

Mögen Sie diese,

Html:

<html> 
    <body> 
    <div class="test"></div> 
    </body> 
</html>

Css:

html, body{ 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

.test{ 
position:absolute; 
    bottom:0px; 
    height: 25%; 
    width: 100%; 
    transform: translateX(0,100%); 
    background: blue; 
}

JSFiddle hier: https://jsfiddle.net/17d80ym3/19/

Quelle

2016-06-30 09:51:35 SMS

Verschieben div an den unteren Rand des Bildschirms mit CSS-Transformation

Antwort

Verwandte Themen