it-swarm-ja.tech

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

その内容がどのようなものでも関係ありません。

これは可能ですか?

144
Mask

これはいつも私のために働きます:

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

これはおそらくこの問題に対する最も簡単な解決策です。 CSS属性を4つだけ設定する必要があります(そのうちの1つはstupid IE happyにするだけです)。

130
Adam Harte

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

IE 9以降、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>
89
Mihai Cicu

これはそれを行うための最も安定した(そして簡単な)方法であり、現代のすべてのブラウザで動作します。

.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のエミュレーションに基づく)で動作することがテスト済み。

50
awe

最近のブラウザでこれを行うための最善の方法は、 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要素のサイズも変更されます。

27
James Donnelly

私は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>
18
Tubbe

私が最も洗練された方法を見つけたのは以下のようなものです。ここでの最もトリックはdivposition: 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>

The mask demo

8
Jeff Tian

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

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

div {
  flex: 1;
  background: tan;
}
<div></div>
7
Mori

これがvhに基づく最短の解決策です。 vh一部の古いブラウザ ではサポートされていません。

CSS:

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

HTML:

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

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

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