19

Ok, I'm trying to get a div to scale and the height is always the height of the viewport. I'm going to link to my examples as it needs some explaining.

www.madmediablitz.com/tv/precentdemo.html

The link above is the closest I've come to a solution and I'm hoping that someone here will find it simple to fix. What I want to happen is the tv to always be the height of the viewport (to a degree, min-height:~400px; max-height:~700px;). The code that I used there is based on http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

This one is what I DON'T want to happen. IF you resize your window you will see it doesn't scale proportionally.

I've been trying both of these for about 2 days now and I haven't been able to get it to work. I'm literally praying for help as I think, this isn't too complicated.

4

3 に答える 3

42

これを参照してください: 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;
}

それでおしまい。

于 2014-03-07T20:38:38.553 に答える
12 
html, body {
  height: 100%;
}

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

于 2009-10-02T15:35:27.960 に答える
11

私が推測する非常に驚くべき方法で絶対測位を使用することができます：

div#element {
  position: relative;
}

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

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

于 2009-10-02T17:01:37.987 に答える