<div>を常にフルスクリーンにする方法は？

170

その内容がどのようなものであっても。

これは可能ですか？

html css responsive

— マスク
ソース

2

ここにはたくさんの素晴らしい答えがありますが、フレックスボックスについては何も言及されていないので、この2セントを共有したいと思いました。、コンテンツをそのdivの中央に配置すると、フレックスボックスを確認できます。css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

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

<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を満足させるためだけのものです）。

— アダム・ハート
ソース

1

@AdamHarte CSSから 'html'セレクターを削除すると機能しないのはなぜですか？→本体{高さ：100％; マージン：0; }

— Alex Prut

2

@ P.Alex Math！HTMLタグの高さがそのコンテンツに合わせて伸びる場合、本体の高さはその親の100％であり、使用可能なスペースの100％に強制されません。

— Adam Harte 14

1

私はcefsharp chromiumを使用してwpfで試してみましたが、動作します:)

— adminSoftDK

106

これは、純粋な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>

スニペットを展開

— ミハイ・チク
ソース

58

これは最も安定した（そして簡単な）方法であり、最新のすべてのブラウザで機能します。

.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のエミュレーションに基づく）で動作することがテストされています。}

— 畏敬の念
ソース

1

以下を使用すると、より効果的に機能します：position: fixed; top: 0; left: 0;そして、今は違う部分：width: 100%; height: 100%;。これは実際には古いブラウザでも問題なく動作します。

— Aart den Braber 2017年

1

下と右を使用するよりも幅と高さを使用する方が良いのはなぜですか？幅と高さを使用し、パディングやボーダーも必要な場合はbox-sizing: border-box;、があることを確認する必要があります。そうしないと、スクロールを引き起こす大きなボックスが表示されます。参照してくださいこれを。

— 2017年

31

最新のブラウザでこれを行う最良の方法は、Viewport-percentage Lengthsを使用して、これらの単位をサポートしていないブラウザの通常のパーセンテージ長さにフォールバックすることです。

ビューポートのパーセンテージの長さは、ビューポート自体の長さに基づいています。ここで使用する2つの単位は、vh（ビューポートの高さ）とvw（ビューポートの幅）です。100vhはビューポートの高さの100vw100％に等しく、ビューポートの幅の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それに応じて要素のサイズが変更されます。

— ジェームス・ドネリー
ソース

18

IE Joshがありません。テストしてください。ありがとう。

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .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>

— タベ
ソース

幅を100％に設定する必要はありません

— Adam Harte、

わかりません。あなたはDIVに800pxの高さをハードコーディングしています。OPはこれが動的であることを望んでいます。

— Josh Stodola、

申し訳ありませんが、そこに絶対に忍び込むことはありませんでした（または上/左）。まあそれはそれで結構です:)

— Adam Harte

補足として、position: fixedページがスクロールできる場合は代わりに使用することもできますが、一部のモバイルブラウザでは機能しないことに注意してください。caniuse.com

— #

1

これを解決するより現代的な方法があると聞きました。@Tubbeそれが本当かどうか知っていますか？

— bzlm 2014年

8

私が最もエレガントな方法を見つけたのは次のようなもので、ここで最もトリックはmake divのposition: fixedです。

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

スニペットを展開

— ジェフティアン
ソース

8

body要素をa flex containerに、divをaに変更しますflex item。

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

スニペットを展開

— 森
ソース

8

以下は、に基づく最短のソリューションvhです。一部の古いブラウザvhではサポートされていないことに注意してください。

CSS：

div {
    width: 100%;
    height: 100vh;
}

HTML：

<div>This div is fullscreen :)</div>

— オレイデル
ソース

1

便利ですが、モバイルブラウザーに問題があります：css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

なぜ問題を複雑にするのですか？これは、モバイルブラウザーDuckDuckGo 5.54.0、Samsung Internet 11.2.1.3、Chrome 81.0.4044.138、およびデスクトップで機能します。Brave 1.10.97、Chrome 83.0.4103.116、Safari 12.1.2。

— Jakob

1

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

<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>

— シャルドゥル
ソース

-8

残念ながら、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>

— ジョシュ・ストドラ
ソース

1

jQuery（推奨）のようなライブラリを使用している場合は、高さを取得することをお勧めし$(window).height();ます。

— Josh Stodola、

純粋なcssソリューションはありますか？

— マスク

@マスクいいえ、ありません。とにかくまだ。

— Josh Stodola、

@Jedどうやってmin-height：100％を適用し、Mac-Safariで試してみたらどうでしょうか。ここで解決策を見つけることができます。それはプラットフォームについて議論するよりも良いと思います。

— Josh Stodola、

3

これは、IE7、Chrome3、Safari4、Opera10で動作します。すべてWindowsでテスト済み。欠点は、それがマスクを避けたかったものであったjavascriptを使用していることです（この回答に関する彼のコメントを参照してください）。TandemAdamの答えは純粋なCSSであり、Operaを除いて、私がテストしたすべてのブラウザーで動作します。

— 畏敬の念