web-dev-qa-db-ja.com

HTMLページとブラウザーウィンドウのサイズを設定する

ID = "container"のdiv要素があります。この要素をブラウザウィンドウの表示可能領域のサイズに設定したい。そのために次のJSを使用しています。

var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;

ただし、ブラウザウィンドウのサイズは表示可能なサイズよりも大きく、水平および垂直のスクロールバーが表示されます。 HTMLページがスクロールバーを必要とせずにブラウザウィンドウに収まるようにするにはどうすればよいですか？

編集：

私は基本的に、どのようにドキュメントサイズをビューポートサイズと同じにすることができますか？

htmlcssresizescrollbar
14
moesef

これは動作するはずです。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                background-color: pink;
            }
            h1 {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Hello World</h1>
        </div>
    </body>
</html>

背景色があるので、これがどのように機能するかを見ることができます。このコードをファイルにコピーして、ブラウザーで開きます。 CSSを少し試してみて、何が起こるか見てみましょう。

width: inherit; height: inherit;は、親要素から幅と高さを引き出します。このshouldはデフォルトであり、実際には必要ありません。

h1 { ... } CSSブロックを削除して、何が起こるかを確認してください。レイアウトが奇妙に反応することに気付くかもしれません。これは、h1要素がコンテナのレイアウトに影響しているためです。これを防ぐには、コンテナまたは本体でoverflow: hidden;を宣言します。

また、 CSS Box Model を読むことをお勧めします。

21
twaddington

CSSでwidth: 100%;を使用できます。

1
yvoyer
<html>
<head >
<title>Welcome</title>    
<style type="text/css">
#maincontainer 
{   
top:0px;
padding-top:0;
margin:auto; position:relative;
width:950px;
height:100%;
}
  </style>
  </head>
<body>
 <div id="maincontainer ">
 </div>
</body>
</html>
1
Vikash pathak