divを画面の下に移動したい。 翻訳プロパティのみ、そのサイズに関連してDIVを動かす：cssで画面のdivを下に移動
<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;
}
これは100％が下方DIVを移動する高さ（画面の25％）です。 divを画面の下部に移動するにはどうすればよいですか？
http://codepen.io/anon/pen/dXWGAm
代わり%の使用vh、それは残して、75％スクリーンの高さの下にそれを移動させる方法を使用することに何の問題25%に固定されていないとあなたのdivの他の25％。
divの高さを25vhに変更して、下部に確実に配置することをおすすめします。
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>あなたはposition:absoluteを使用してbottom:0pxを作ることができます。 transformプロパティの代わりに。 position:absoluteを使用して
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>私が述べたように、私は変換を使用したい：translate（）; – ManuKaracho
そのdivの親がありますか？ –
が最善の方法この
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>のようなものです。しかし、あなたは、具体的transform使用する必要があるとして、この
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>あなたの高さは
75vh
私が述べたように、私は変換を使用したい：translate（）; – ManuKaracho
が
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：https://jsfiddle.net/17d80ym3/19/
'transform：translate（0、calc（100vh-25％））' '％ 'は' vh'と同じであると仮定できません。 –
@Mr_Green良い点 - 25％から25vhに高さを変更する方が良いとのコメントを追加しました –