web-dev-qa-db-de.com

wie erstelle ich eine Vollbilddarstellung und verhindere, dass die Größe durch den Inhalt geändert wird?

für meine Webanwendung möchte ich, dass das Hauptdivision Vollbild ist (Breite und Höhe = 100%). Unabhängig vom Inhalt möchte ich, dass es bei dieser Größe bleibt. Das heißt, wenn es nicht viel Inhalt gibt, sollte es nicht schrumpfen, und wenn es zu viel Inhalt gibt, sollte es dieses Hauptdivision nicht verschieben.

wie kann ich das machen?

(Ich bin in Ordnung mit Hacks, die auf dieses Div angewendet werden, solange der Inhalt hackfrei bleibt.)

35
throwaway007

Oder auch nur:

<div id="full-size">
  Your contents go here
</div>
html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

(html, body kann auf 95% -99% eingestellt werden, um leichte Inkonsistenzen in den Margen usw. zu berücksichtigen.)

37
lucideer
#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
15
JumpLink

Beachten Sie, dass die meisten davon nur OHNE DOKTYP verwendet werden können. Ich suche nach der gleichen Antwort, aber ich habe einen DOKTYP. Es gibt eine Möglichkeit, dies mit einem DOCTYPE zu tun, obwohl dies nicht auf den Stil meiner Website zutrifft, aber es funktioniert mit dem Typ der Seite, die Sie erstellen möchten:

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

Nun wurde dies bereits erwähnt, aber ich wollte nur klarstellen, dass dies normalerweise mit einem DOCTYPE verwendet wird, Höhe: 100%; funktioniert nur ohne DOCTYPE

9
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>
3
Bob
#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}
0
Robusto

Ich verwende diesen Ansatz zum Zeichnen einer modalen Überlagerung.

.fullDiv { width:100%; height:100%; position:fixed }

Ich glaube, der Unterschied ist hier die Verwendung von position: fixed , die möglicherweise auf Ihren Anwendungsfall zutreffen.

Ich füge auch z-index:1000; background:rgba(50,50,50,.7); hinzu

Dann kann der modale Inhalt in diesem div gespeichert werden, und der Inhalt, der sich bereits auf der Seite befand, bleibt im Hintergrund sichtbar, wird jedoch beim Scrollen vollständig von der Überlagerung bedeckt.

0
Dustin Young

Verwenden Sie das HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

und verwende das CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Stellen Sie sicher, dass sich der HTML-Code im Stammelement befindet.

Hoffe das hilft!

0
mattbasta