web-dev-qa-db-ja.com

全画面divを作成し、コンテンツによってサイズが変更されるのを防ぐ方法

私のWebアプリケーションでは、メインdivをフルスクリーン（幅と高さ= 100％）にしたいので、コンテンツに関係なく、そのサイズのままにしておきたいです。つまり、コンテンツがあまりない場合は縮小すべきではなく、コンテンツが多すぎる場合はこのメインdivをプッシュすべきではありません。

これどうやってするの？

（コンテンツがハッキングされないようにする限り、このdivにハッキングを適用しても構いません）

cssfullscreen
36
throwaway007

または単に：

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

（html、bodyはlike .. 95％-99％などに設定できます。マージンなどのわずかな不整合を説明するために使用できます。）

40
lucideer
#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
18
JumpLink

これらのほとんどがDOCTYPEなしでしか使用できないことに注意してください。同じ答えを探していますが、DOCTYPEがあります。ただし、DOCTYPEで行う方法は1つありますが、私のサイトのスタイルには適用されませんが、作成するページのタイプでは機能します。

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

さて、これは以前に言及されましたが、これは通常、DOCTYPE、height：100％で使用されることを明確にしたかっただけです。 DOCTYPEなしでのみ機能します

9
Zachary Anderson
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>
3
Bob

このアプローチをモーダルオーバーレイの描画に使用します。

_.fullDiv { width:100%; height:100%; position:fixed }
_

ここでの違いはposition：fixedの使用であると思いますが、これはユースケースに適用される場合と適用されない場合があります。

z-index:1000; background:rgba(50,50,50,.7);も追加します

その後、モーダルコンテンツはそのdiv内に存在でき、既にページ上にあったコンテンツはすべてバックグラウンドで表示されたままですが、スクロール中は完全にオーバーレイで覆われます。

2
Dustin Young
#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}
0
Robusto

HTMLを使用する

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

cSSを使用します。

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

HTMLがルート要素にあることを確認してください。

お役に立てれば！

0
mattbasta