Ich habe ein Div-Element mit ID = "Container". Ich möchte dieses Element auf die Größe des sichtbaren Bereichs im Browserfenster einstellen. Ich benutze die folgende JS, um dies zu tun.
var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;
Das Browserfenster ist jedoch größer alsDie sichtbare Größe sowie horizontale und vertikale Bildlaufleisten werden angezeigt. Wie stelle ich sicher, dass meine HTML-Seite ohne Bildlaufleisten in das Browserfenster passt?
BEARBEITEN:
Grundsätzlich frage ich mich, wie ich die Dokumentgröße auf die Ansichtsfenstergröße einstellen kann.
Antworten:
20 für die Antwort № 1Das sollte funktionieren.
<!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>
Die Hintergrundfarben sind vorhanden, damit Sie sehen können, wie dies funktioniert. Kopieren Sie diesen Code in eine Datei und öffnen Sie ihn in Ihrem Browser. Versuchen Sie, ein bisschen mit dem CSS herumzuspielen, und sehen Sie, was passiert.
Das width: inherit; height: inherit; Zieht die Breite und Höhe aus dem übergeordneten Element. Diese sollte Standard sein und ist nicht wirklich notwendig.
Versuchen Sie, die h1 { ... } CSS blockieren und sehen, was passiert. Sie werden vielleicht bemerken, dass das Layout merkwürdig reagiert. Das liegt daran, dass die h1 Das Element beeinflusst das Layout seines Containers. Sie könnten dies verhindern, indem Sie dies deklarieren overflow: hidden; auf dem Behälter oder dem Körper.
Ich würde auch vorschlagen, dass Sie etwas über das Buch lesen CSS-Boxmodell.
1 für die Antwort № 2
Du könntest benutzen width: 100%; in deiner css.
1 für die Antwort № 3
<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>