Wie implementiere ich das Fluid-Design für einen Monitor der Größe 1024x768 oder höher?

  • Einfach gesagt, ich möchte, dass der Körper der Site bei 1024x768-Monitoren 100% des Browsers einnimmt, und bei Monitoren mit höherer Auflösung (1024x768 und höher), um den Körper in der Mitte (zentriert ausgerichtet) anzuzeigen ) Lassen Sie links und rechts gleich viel Platz.

    Dies ist bei vielen Websites sehr häufig, aber ich weiß nicht, wie sie implementiert werden soll. Kann mir jemand zeigen, wie ich den CSS-Code, den ich angefangen habe, fertigstellen und beenden kann? Vielen Dank.

    HTML

        <div class="header">content</div>
       <div class="side-bar">content</div>
       <div class="container">content</div>
     

    CSS

            html body{ 
           margin:0;
           background:#fff;      
           }
          .container{float:left}
          .side-bar{float:left}
     
    22 November 2011
    bouteillebleu
4 answers
  • "Heute verwenden die meisten Besucher eine Bildschirmauflösung von mehr als 1024 x 768 Pixeln." : //www.w3schools.com/browsers/browsers_display.asp

    Wenn Sie also eine Website mit einer Breite von 1024 Pixeln benötigen, müssen Sie lediglich einen Container mit 1024 Pixel erstellen Pixel fett :) und Marge: auto;

    http: // jsfiddle.net/kx2nE/3/

    Ich habe eine kleinere Größe verwendet, damit Sie das Ergebnis in jsfiddle besser sehen können, aber Sie können diese Werte in Ihrer CSS-Datei ersetzen .

     #container
    {
      width:300px !important;
      height:500px !important;
      border:1px solid red;
      margin:auto;
    }
    
    <div id="container">
        container with equal margins on window resize<br />
        <br /><br /><br />
    
        <b>
        width and height values set to yours 1024x768
        </b>
    </div>
     
    22 November 2011
    rmagnum2002
  • Schauen Sie sich das Fluid 960-Rastersystem an - http://www.designinfluences.com/fluid960gs/

    Mit dieser Funktion können Sie Content-Divs in einem horizontalen Raster organisieren, das 100% der Browserbreite einnimmt.

    22 November 2011
    dubvfan87Clint
  • Normalerweise wird diese Art von Frage beim Stapelüberlauf nicht empfohlen, da Sie tatsächlich kein Problem hatten. Es gibt jedoch einen sehr guten CSS-Coder, der dies für Sie gelöst hat. Hier ist ein Link zum Download, den Sie ausprobieren können.

    http: //matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

    22 November 2011
    BentOnCoding
  • Legen Sie für 1024 Monitore die Breite auf einen Prozentsatz und eine Mindestbreite für die feste Größe fest:

     #main {
    width: 95%;
    min-width: 990px; /* I suggest a number around 990, due to scroll bar width, experiment at will or use javascript to apply dynamically */
     

    Um die Site zentriert auszurichten, verwenden Sie einen automatischen horizontalen Rand:

     margin: 0 auto;
    }
     

    Hinweis: Sie müssen diese anwenden ein div direkt unter dem Körper (der Körper selbst kann die Größe nicht ändern)

     <body>
    <div id=main>
    <div class="header">content</div>
    <div class="side-bar">content</div>
    <div class="container">content</div>
    </div>
    </body>
     

    Bearbeiten: Ah, ich sehe was Sie Mittelwert, Flüssigkeit mit maximaler Breite, die meisten der vorgenannten Stände ändern 95% in 100% und min in max:

     #main {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    }
     
    22 November 2011
    J V