it-swarm.com.de

Wie kann ich eine Seite automatisch an ein Fenster anpassen lassen?

Ich habe gerade meine erste richtige HTML-Website für einen Freund gestartet und mich gefragt, wie ich die Website dazu bringen könnte, die Seite automatisch anzupassen.

Es ist ein Landschaftsdesign, das kein Scrollen erfordert.

20
JoeJoe2416

Sie sollten body und html auf position:fixed; und dann right: , left: , top: und bottom: bis 0;. Selbst wenn der Inhalt überläuft, wird er auf diese Weise nicht über die Grenzen des Ansichtsfensters hinausgehen.

Beispielsweise:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

JS Fiddle Beispiel

Vorsichtsmaßnahme : Wenn der Benutzer bei dieser Methode sein Fenster verkleinert, wird der Inhalt abgeschnitten.

16
JSW189

Wenn es in einer Landschaft ist, brauchen Sie mehr Breite und weniger Höhe! Genau das haben alle Websites.

Lass uns erst mit einem Basic anfangen, dann mit dem Rest!

Das grundlegende CSS:

Mit CSS können Sie dies tun,

#body {
width: 100%;
height: 100%;
}

Hier verwenden Sie ein div mit id body als:

<body>
  <div id="body>
    all the text would go here!
  </div>
</body>

Dann können Sie eine Webseite mit 100% Höhe und Breite.

Was ist, wenn er versucht, die Fenstergröße zu ändern?

Was passiert, wenn er versucht, die Fenstergröße zu ändern? Dann alle Elemente in #body würde versuchen, die Benutzeroberfläche durcheinander zu bringen. Dafür können Sie folgendes schreiben:

#body {
height: 100%;
width: 100%;
}

Und füge einfach min-heightmax-heightmin-width und max-width.

Auf diese Weise bleibt das Seitenelement an der Stelle, an der es sich beim Laden der Seite befand.

Mit JavaScript:

Mit JavaScript können Sie die Benutzeroberfläche steuern und jQuery wie folgt verwenden:

$('#body').css('min-height', '100%');

Alle anderen verbleibenden CSS-Eigenschaften und JS kümmern sich um die Benutzeroberfläche, wenn der Benutzer versucht, die Fenstergröße zu ändern.

So fügen Sie der Webseite keinen Bildlauf hinzu:

Wenn Sie nicht versuchen, eine Schriftrolle hinzuzufügen, können Sie diese JS verwenden

$('#body').css('min-height', screen.height); // or anyother like window.height

Auf diese Weise erhält das Dokument eine neue Höhe, wenn der Benutzer die Seite lädt.

Die zweite Option ist besser, da Benutzer bei unterschiedlichen Bildschirmauflösungen ein CSS oder ein Stylesheet für ihren eigenen Bildschirm erstellen möchten. Nicht für andere!

Tipp: Verwenden Sie JS, um die aktuelle Bildschirmgröße zu ermitteln und die Seite zu bearbeiten. :)

11

sie können CSS verwenden, um es zum Beispiel zu tun

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>
6
user1825286