206

内容はどうでもいい。

これを行うことは可能ですか？

4

10 に答える 10

170

これは常に私にとってはうまくいきます：

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

これはおそらく、この問題に対する最も簡単な解決策です。4 つの CSS 属性を設定するだけで済みます (ただし、そのうちの 1 つは IE を満足させるためだけのものです)。

于 2009-11-12T02:31:17.027 に答える
135

これは、純粋な css を使用してフルスクリーン div を作成する私のソリューションです。スクロールしても持続する全画面の div を表示します。また、ページのコンテンツが画面に収まる場合、ページにはスクロール バーが表示されません。

IE9 以降、Firefox 13 以降、Chrome 21 以降でテスト済み

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

于 2012-08-16T07:32:26.147 に答える
75

これが最も安定した (そして簡単な) 方法で、最新のすべてのブラウザーで動作します。

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}
<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

Firefox、Chrome、Opera、Vivaldi、IE7+ (IE11 でのエミュレーションに基づく) で動作することがテスト済みです。

于 2014-05-30T09:43:09.803 に答える
38

最新のブラウザーでこれを行う最善の方法は、Viewport-percentage Lengthsを利用し、これらの単位をサポートしていないブラウザーの通常のパーセンテージの長さに戻すことです。

ビューポートのパーセンテージの長さは、ビューポート自体の長さに基づいています。ここで使用する 2 つの単位は、vh(ビューポートの高さ) とvw(ビューポートの幅) です。100vhビューポートの高さの 100% に100vw等しく、ビューポートの幅の 100% に等しくなります。

次の HTML を想定します。

<body>
    <div></div>
</body>

以下を使用できます。

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

これは、結果フレームの高さと幅の両方を満たす要素を示すJSFiddleデモです。div結果フレームのサイズを変更すると、divそれに応じて要素のサイズが変更されます。

于 2014-05-28T09:44:01.103 に答える
21

テストするIEがありませんが、これは機能するはずです。

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>
于 2009-11-12T08:48:01.807 に答える
2

これは私が使用するトリックです。レスポンシブ デザインに適しています。ユーザーがブラウザのサイズ変更をいじろうとすると、完全に機能します。

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>
于 2015-11-22T00:42:20.837 に答える
-9

残念ながら、heightCSS のプロパティは本来あるべきほど信頼性が高くありません。したがって、Javascript を使用して、問題の要素の高さスタイルをユーザー ビューポートの高さに設定する必要があります。はい、これは絶対配置なしで実行できます...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>
于 2009-11-12T02:34:23.807 に答える