Gibt es eine Möglichkeit, zu verhindern, dass absolut positionierte divs auf kleinen Bildschirmen verschwinden?

Question

Ich bin mir nicht sicher, wie ich das erklären soll, also hier ist ein Bild: Fenster zu klein http://vsave.org/my/user_folders/Ian33_159/image.jpg

Wie Sie auf dem Bild sehen können, bewegt sich das Bild aus dem Blickfeld, wenn der Bildschirm kleiner wird, weil ich den folgenden Code verwende:

    position: absolute;
    left: 50%;
    margin-left: -450px;
    width: 900px;

Da 450px abgezogen werden, bewegt es sich nach links aus Ihrem Blickfeld, wo Sie es nicht mehr sehen können.

Hier ist der Code für meinen body-Tag:

    body {
margin: 0px;
padding: 0px;
min-width:1000px; /* nehmen wir an, Sie möchten eine Mindestbreite von 1000px */
width: auto !important;  /* Firefox wird die Breite als auto setzen */
width:1000px;             /* Da IE !important ignoriert, wird er die Breite als 1000px setzen;*/
    }

Wenn Sie weitere Informationen benötigen, lassen Sie es mich einfach wissen. Vielen Dank

Answer 1

Setze ein min-width auf das übergeordnete Element (oder den body) und dadurch wird dafür gesorgt, dass das Fenster horizontal scrollt, anstatt über die Seite hinauszulaufen.

Beachte, dass min-width IE 7+ ist.

Answer 2

Sie könnten Media Queries verwenden, um sich an die kleinere Bildschirmgröße anzupassen:

@media screen and (min-width: 900px) {
 #container {
  position: static;
  /* Oder */
  width: 450px;
  margin-left: -225px;
}
}