Einstellung eines div ' s height in HTML mit CSS

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

Frage

Ich bin versucht, lay out a table-wie-Seite mit zwei Spalten.Ich möchte die Spalte ganz rechts zum dock auf der rechten Seite der Seite, und diese Spalte sollte eine unterschiedliche Hintergrundfarbe.Der Inhalt auf der rechten Seite ist fast immer geringer sein als auf der linken.Ich möchte, dass das div auf der rechten Seite immer groß genug, um die Reichweite der separator für die Zeile darunter.Wie kann ich meine Hintergrundfarbe füllen, dass der Raum?

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Edit:Ich bin damit einverstanden, dass das Beispiel ist sehr table-like und eine tatsächliche Tabelle wäre eine gute Wahl.Aber meine "echte" Seite wird irgendwann weniger, Tisch -, und ich möchte nur, um erste Meister dieser Aufgabe!

Auch, für einige Grund, als ich erstellen/Bearbeiten Sie meine posts in IE7, zeigt den code ordnungsgemäß in der Vorschau anzeigen, aber wenn ich tatsächlich post die Nachricht, die Formatierung wird entfernt.Bearbeiten mein post in Firefox 2 scheint geklappt zu haben, FWIW.

Noch ein edit:Ja, ich abgelehnten GateKiller Antwort.Es funktioniert in der Tat schön auf meine Seite, aber nicht in meiner eigentlichen schwereren Seite.Ich werde untersuchen einige der links y ' all haben wies mich auf.

War es hilfreich?

Lösung

Ähem...

Die kurze Antwort auf Ihre Frage ist, dass Sie müssen stellen Sie die Höhe von 100% des Körper-und html-Tags, dann legen Sie die Höhe auf 100% auf jedes div-element, das Sie möchten, um machen Sie 100% die Höhe der Seite.

Tatsächlich, die 100% der Höhe wird nicht Arbeit in die meisten design-Situationen - das mag kurz sein, aber es ist keine gute Antwort.Google "jeder Spalte längsten" - layouts.Der beste Weg ist zu setzen Sie den linken und rechten Spalten innerhalb einer wrapper - div, float Links und rechts Spalten und dann die float-wrapper - dies macht es zu dehnen, um die Höhe der innere Behälter - und legen Sie dann das Hintergrundbild auf die äußere Hülle.Aber achten Sie auf horizontale Ränder auf die gefloateten Elemente in Fall Sie erhalten die IE "double-float-margin-bug".

Andere Tipps

Geben diesem einen Versuch:

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

Einige Browser unterstützen CSS-Tabellen, so könnte man erstellen Sie diese Art von layout mit den verschiedenen CSS display: table-* Werte.Es gibt weitere Informationen zum CSS-Tabellen in diesem Artikel (und das Buch mit dem gleichen Namen) von Rachel Andrew: Alles, was Sie Wissen Über CSS ist Falsch

Wenn Sie benötigen ein konsistentes layout in älteren Browsern, die CSS nicht unterstützen, Tabellen, müssen Sie zwei Dinge tun:

  1. Machen Sie Ihre "table-row" element deaktivieren Sie den internen schwebte Elemente.

    Der einfachste Weg, dies zu tun ist, um overflow: hidden die Pflege übernimmt die meisten Browser, und zoom: 1 zum auslösen des hasLayout Eigenschaft in älteren Versionen von IE.

    Es gibt viele andere Arten von clearing-schwimmt, wenn dieser Ansatz bewirkt, dass unerwünschte Nebenwirkungen sollten Sie prüfen, die Frage die Methode des "clearfix' ist am besten und der Artikel auf layout für andere Methoden.

  2. Balance die Höhe der beiden "table-cell" - Elemente.

    Es gibt zwei Möglichkeiten, wie Sie könnte diesen Ansatz.Sie können entweder erstellen Sie das Aussehen von gleicher Höhen durch einstellen eines hintergrund-Bildes auf dem "Tabellenzeile" - element ( faux-Spalten-Technik) können Sie die Höhe der Spalten entsprechen, indem Sie jedem eine große Polsterung und ebenso große negative Marge.

    Faux Spalten ist der einfachere Ansatz und funktioniert sehr gut, wenn die Breite von einem oder beiden Spalten fixiert ist.Die andere Technik besser zurecht kommt mit variabler Breite Spalten (in Prozent oder em-Einheiten), aber es kann Probleme verursachen, die in manchen Browsern, wenn Sie über einen link direkt zum Inhalt innerhalb der Spalten (z.B.wenn eine Spalte enthalten <div id="foo"></div> und Sie verbunden mit #foo)

Hier ist ein Beispiel mit dem padding/margin-Technik, um die balance der Höhe der Säulen.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Dieses Barcamp demo von Natalie Downe kann auch nützlich sein, wenn Sie herausfinden, wie, um zusätzliche Spalten hinzuzufügen und schön spacing und padding: Gleicher Höhe, Säulen und andere tricks (es ist auch, wo ich zuerst erfuhr die margin/padding trick to balance Spalte Höhen)

Ich habe bis auf streng CSS und ein wenig jquery:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

Hier ist ein Beispiel von gleich-Höhe-Spalten - Höhe-Spalten - revisited

Sie können auch überprüfen Sie heraus die Idee von "Faux Columns" sowie - Faux Spalten

Gehen Sie nicht den Tisch route.Wenn es nicht tabellarische Daten, nicht behandeln es als solches.Es ist schlecht für die Zugänglichkeit und Flexibilität.

Ich hatte das gleiche problem auf meiner Seite (shameless plug).

Ich hatte das nav Abschnitt "float:rechts" und der Hauptteil der Seite hat einen hintergrund Bild über 250px über rechts ausgerichtet, und "repeat-y".Ich fügte dann etwas mit "deutlich:die beiden" zu Ihr.Hier ist die W3Schools und der CSS-Eigenschaft löschen.

Ich legte die klar am unteren Ende der "Seite" eingestuft div.Mein Quellcode sieht ungefähr so aus.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

Ich hoffe das hilft :)

Keine Notwendigkeit zu schreiben, eigenes css gibt es eine Bibliothek namens "Bootstrap-css" mit dem Ruf, dass Sie in Ihrem HTML-head-Abschnitt, wir können erreichen viele stylings,Hier ist ein Beispiel:Wenn Sie wollen, um zwei Spalte in einer Zeile, können Sie einfach Folgendes tun:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

Hier md steht für medium-Gerät, können Sie die Verwendung col-sm-6 für kleinere Geräte und col-xs-6 für extra kleine Geräte

Die kurze Antwort auf Ihre Frage ist, dass Sie müssen stellen Sie die Höhe von 100% des Körper-und html-Tags, dann legen Sie die Höhe auf 100% auf jedes div-element, das Sie möchten, um machen Sie 100% die Höhe der Seite.

Ein 2-Spalten-layout ist ein bisschen schwer zu bekommen arbeiten in CSS (mindestens bis CSS3 ist praktisch.)

Schwimmende Links und rechts funktioniert bis zu einem Punkt, aber es wird nicht erlauben Sie zu erweitern die hintergrund.Um die Hintergründe solide bleiben, müssen Sie umzusetzen, eine Technik, bekannt als "faux columns", was im Grunde genommen bedeutet, dass Ihre Spalten selbst nicht haben eine hintergrund Bild.Ihre 2 Spalten enthalten sind, innerhalb einer übergeordneten Tags.Diese übergeordnete tag gegeben wird, ein Hintergrundbild enthält die Spalte 2 Farben, die Sie wollen.Machen diesem hintergrund nur so groß, wie Sie es brauchen (wenn es ist solide Farbe, schaffen es nur 1 pixel hoch) und haben es repeat-y.AListApart hat einen großen Durchlauf auf, was notwendig ist, damit es funktioniert.

http://www.alistapart.com/articles/fauxcolumns/

Ich kann mir denken 2 Optionen

  1. Verwenden Sie javascript, um die Größe des kleineren Spalte auf Seite laden.
  2. Fake die gleichen Höhen durch einstellen der background-color für die Spalte auf die container <div/> stattdessen (<div class="separator"/>) mit repeat-y

Nur versuchen zu helfen, hier also der code ist besser lesbar.
Denken Sie daran, dass Sie können setzen Sie code-snippets, indem Sie auf den Knopf an der Oberseite mit "101010".Geben Sie einfach Ihren code dann markieren Sie es und klicken Sie auf die Schaltfläche.

Hier ist ein Beispiel:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

Dies sollte für Sie arbeiten:Legen Sie die Höhe auf 100% in Ihrer css-Datei für die html und body Elemente.Sie können dann passen Sie die Höhe an Ihre Bedürfnisse div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

Es ist genug, nur verwenden die css-Eigenschaft width zu tun.

Hier ist ein Beispiel:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top