web-dev-qa-db-ja.com

フルビューポートの高さスケーリングdivはcssno jsだけです...可能ですか？

わかりました。divを拡大縮小しようとしています。高さは常にビューポートの高さです。説明が必要なため、例にリンクします。

www.madmediablitz.com/tv/precentdemo.html

上記のリンクは私が解決策にたどり着いた最も近いものであり、ここの誰かが簡単に修正できることを願っています。私がしたいのは、テレビが常にビューポートの高さになることです（ある程度、最小の高さ：〜400px;最大の高さ：〜700px;）。そこで使用したコードは http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ に基づいています。

www.madmediablitz.com/tv/precentdemo_alt.html

これは私が起こりたくないことです。ウィンドウのサイズを変更すると、比例して拡大縮小されないことがわかります。

私はこれらの両方を約2日間試しましたが、機能させることができませんでした。私は文字通り助けを祈っています、これはそれほど複雑ではありません。

cssheightscalingviewport
19
angryDev

これを参照してください： http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>
div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

それでおしまい。

39
pixparker
html, body {
  height: 100%;
}

this の記事を読んでください。

12
3zzy

私が推測する非常に驚くべき方法で絶対配置を使用できます。

div#element {
  position: relative;
}

img.vertical {
  position: absolute;
  top: 0; // no need for px or em 
  bottom: 0;
}

準拠しているブラウザは、topディレクティブとbottomディレクティブの両方を尊重し、実際には完全な高さを管理する必要があります。

11
Matthieu M.