IDが "container"のdiv要素があります。この要素をブラウザウィンドウ内の可視領域のサイズに設定したいと思います。私はそうするために次のJSを使用しています。HTMLページとブラウザウィンドウのサイズを設定します
var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;
ただし、ブラウザウィンドウのサイズは表示可能なサイズより大きく、水平および垂直スクロールバーが表示されます。スクロールバーを必要とせずにHTMLページがブラウザウィンドウに収まるようにするにはどうすればよいですか？
EDIT：
私は基本的に求めています、どのように私は、ビューポートのサイズなど、ドキュメントのサイズが同じにすることができますか？
これは動作するはずです。
<!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;は、親要素から幅と高さを引き出します。このはデフォルトのである必要があります。
h1 { ... } CSSブロックを削除して、何が起こるかを確認してください。レイアウトが奇妙に反応することに気付くかもしれません。これは、h1要素がそのコンテナのレイアウトに影響を与えているためです。コンテナや本体にoverflow: hidden;と宣言することで、これを防ぐことができます。
また、CSS Box Modelの読書をお勧めします。
<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>
それはあなたが提案したように私に問題を与えていた "コンテナ"の子要素でした。良いコール。ありがとう！ – moesef