tutorial - html table




Flüssiges CSS-Layout und Rahmen (3)

Dies wird Ihnen ziemlich nah, aber nicht 100% des Weges (Wortspiel beabsichtigt). Um einem Element 100% Höhe zu geben, muss es "100% von was?" Wissen. Alle Elternelemente müssen ebenfalls 100% Höhe haben und dies beinhaltet den Körper. Oder wie das W3C es ausdrückt: "Wenn die Höhe des umschließenden Blocks nicht explizit angegeben ist (dh, es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert automatisch berechnet." Wie Sie sehen können, müssen wir dem Körper auch "Position: absolut" geben. für die Höhe geehrt werden. In diesem Beispiel wird die Breite auch in fünf gleiche Spalten mit Rahmen unterteilt (und nur zum Spaß ein Padding und ein Rand):

<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute; 
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
    div.column {
    height: 100%;
    border: 1px solid blue;
    margin: 1em;
    padding: 2em;
    }
</style>

<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>

Wie Sie sehen können, wenn Sie es testen, haben wir kein Problem mit dem Withd. Dies liegt daran, dass die "Abschnitte", die die Breite teilen, keine Abstände, Ränder oder Ränder haben. Daher ist die Breite, die wir einstellen, die Breite, die sie auf dem Bildschirm einnehmen. Dies ist in der Praxis nicht streng zutreffend. Ich habe tatsächlich die Breiten 19,95% und nicht die erwarteten 20% festgelegt. Problem ist, dass einige Browser (IE für einen) einen Rundungsfehler haben, wenn sie Prozentsätze addieren, und je mehr Unterteilungen addiert werden, desto größer ist der Fehler.

Wo diese Methode offensichtlich fehlschlägt, ist es, wenn es um die Höhe geht. Im Gegensatz zu "width: auto;" wird das div den verfügbaren horizontalen Abstand "height: auto;" wird das div nur so groß wie seinen Inhalt machen. Sie müssen "Höhe: 100%" angeben. um zu erreichen, dass das div die höhe des fensters ausfüllt, aber beim hinzufügen von margin, padding und border wird die gerenderte höhe des divs größer als das viewport, was zu einer vertikalen scrollbar führt.

Hier kann ich nur zwei Möglichkeiten wirklich sehen; Entweder 1) akzeptiere, dass die divs die Fensterhöhe nicht ganz ausfüllen und ihre Höhe auf vielleicht 80% einstellen oder 2) Überspringe den unteren Rand und setze den Körper auf "overflow: hidden;", was die Teile des divs, die über den Rand des Fensters hinausragen.

Schließlich könnten Sie natürlich auch ein paar einfache Skripts verwenden, um das zu erreichen, wonach Sie suchen. Sollte nicht sehr kompliziert sein - aber das ist eine Frage mit einem anderen Tag ... Happy Coding!

Wie benutzt man beim Entwurf eines Fluidlayouts Grenzen, ohne das Layout zu zerstören.

Genauer gesagt, ich habe ein HTML-Widget, das aus fünf divs besteht. Ich möchte, dass die fünf Divs den gesamten Raum in dem enthaltenden Element einnehmen. Ich möchte auch eine 1px Grenze um jeden haben.

Ich habe versucht: .box {float: left; Höhe: 100%; Breite: 100%; Grenze: 1px fest rot; } Dies funktioniert nicht: Es wird eine zusätzliche 10px in der Breite sein, die die Wrap-Boxen verursacht. Das Verringern des Prozentsatzes der Breite funktioniert nicht, da es den richtigen Speicherplatz nicht belegt und für bestimmte Seitengrößen weiterhin umbrochen wird.

Was ist der richtige Weg, um die Interaktion zwischen diesen Elementen zu verwalten?


Setzen Sie nur die width: 100% auf das äußerste Teil und legen Sie keinen Rand darauf. Wenn Sie dies tun, füllen die inneren Kästchen den Raum aus (vorausgesetzt, Sie haben sie nicht verschoben oder irgendetwas), da sie Blockelemente sind, und Sie müssen sich keine Sorgen über Grenzen machen, die zur Gesamtgröße hinzugefügt werden.

Wenn Sie wirklich das Aussehen von fünf festen, verschachtelten Ein-Pixel-Rahmen benötigen, können Sie so etwas tun (mit korrekten semantischen Namen, hoffentlich):

<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>

Wie Sie sehen können, können Sie den zweiten Rand mit Padding- und Hintergrundfarben auf dem zweiten div fälschen (möglicherweise sogar die Gesamtzahl der divs verringern). Denken Sie daran, dass Sie den äußersten div nicht auffüllen können, ohne Ihre Breite zu vergrößern ).


Oh Junge, ich hasse es fast, dies zu erwähnen, aber es gibt eine sehr einfache Möglichkeit, dies in einer horizontalen Leiste zu tun. Es ist nicht "Pixel-perfekt", außer bei Ihrer minimalen Breite, ist aber für das bloße Auge nicht erkennbar.

Teilen Sie das Container-Div durch die Anzahl der Elemente. Nehmen wir an, Sie haben sechs Navigationselemente mit einem weißen Rand (das ist besonders gut für Zahlen, die nicht in 100 geteilt werden, weil es auf keinen Fall perfekt ist).

Legen Sie die Gesamtbreite für jedes linksbündige untergeordnete div auf den korrekten Bruch fest (mit% für den linken oder rechten Rand oder den Abstand), sodass sie @ 100% entsprechen. Machen Sie weiter und setzen Sie einen 1px Rand rechts auf die Child Divs. Für das letzte div am rechten Ende, mach entweder eine zweite Klasse ohne Grenze oder benutze einfach style = 'border: none'.

Verringern Sie dann die Breite jedes untergeordneten Bereichs langsam auf die Mindestbreite, bis sie passen.

Hier ist ein bisschen Code von einer alten Seite von mir mit dieser Methode für eine flüssige Seite mit einer minimalen Breite von 960px (958 px und einer 1px Grenze auf jeder Seite):

.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}

Ich denke, es ist tatsächlich so nah an Pixel perfekt, wie es bei minimaler Breite und bei höheren Breiten möglich ist, obwohl die rechte Seite vielleicht 4 Pixel breiter ist als die anderen, kann man nicht sehen, wenn man sie betrachtet. (Dies würde natürlich nicht funktionieren, wenn Sie einen rechten Rand am äußersten rechten Teil benötigen, da Sie einige Pixel Hintergrund sehen würden.)





css