web-dev-qa-db-ja.com

画面全体をカバーするdivを作成する方法

質問があります。

私はこれをこれまでに得ました： enter image description here

私は基本的に、強調表示されたdivがデバイス画面の大きさに関係なくデバイス画面を覆うようにしたいと考えています。スマートフォンでこれを開くと、2つの異なるdivが表示されます。強調表示されているものだけを表示したい。どうすればこれを達成できますか？

事前にありがとう、ケビン

htmlcssresponsive
8
Kevin

ビューポートの高さを高さの値として使用できます。

.main {
    height: 100vh;
    background-color: green;
}
<div class="main">
  CONTENT
</div>

高さの使用：100vhは、問題の要素が常にユーザー/デバイスのビューポートの100％の高さであることを意味します。

詳細： https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

14
David Wilkinson

フルスクリーンにしたいdivの位置をabsoluteに設定し、以下のCSSを適用することで、おそらくそれを行うことができます。

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

したがって、最終的なCSSは次のようになります

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}
3
saugandh k

position: absolute;またはposition: fixedを使用できます。
absoluteを使用して、ページ全体を覆うだけにします。
fixedを使用して、デフォルトの位置に釘付けにします。 fixedを使用している場合、ページが100％を超えていても、下にスクロールして他のものを表示することはできません。

CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

HTML

<div class="any"></div>
2
Advaith
.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: fill;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
0
Abhishek Meharia