Wie kann ich drei Spalten erhalten, Geschwister divs, jeder erweitern, um seine Eltern zu füllen?

Ich habe für immer gesucht. Entschuldigung, ich bin an diesem Punkt ziemlich verzweifelt, also dachte ich, ich würde hier fragen. Unten ist ein HTML-Beispiel. Wenn Spalte B länger als eine einzelne Seite ist (Ansichtsfenster, sorry, ich bin mir nicht sicher, ob die richtige Terminologie hier verwendet wird), werden A und C nicht in der Höhe erweitert, um das Container-Div zu füllen. Sie füllen die gesamte Seite aus, bleiben aber auf einer einzelnen Seitenlänge stehen, selbst wenn Spalte B länger als eine einzelne Seite ist. Irgendwelche Ideen, ich habe mir die Haare ausgezogen. Ich habe mit Höhe und Min-Höhe gespielt und nichts scheint zu funktionieren.Wie kann ich drei Spalten erhalten, Geschwister divs, jeder erweitern, um seine Eltern zu füllen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
     <style type="text/css"> 
      html, body 
      { 
       height: 100%; 
       background-color: gray; 
       padding: 0; 
       margin: 0; 
      } 

      #container 
      { 
       height: 100%; 
       margin: auto; 
       padding: 0px; 
       width: 610px; 
      } 

      #a 
      { 
       width: 5px; 
       min-height: 100%; 
       float: left; 
       background-color: yellow; 
      } 

      #b 
      { 
       width: 600px; 
       background-color: Blue; 
       float:left; 
       min-height: 100%; 
      } 

      #c 
      { 
       width: 5px; 
       float:left; 
       min-height: 100%; 
       background-color: green; 
      } 
     </style> 
</head> 
<body> 
     <div id="container"> 
      <div id="a"></div> 
      <div id="b"> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
       <p>more</p> 
      </div> 
      <div id="c"></div> 
    </div> 
</body> 
</html>

EDIT: Bevor ich jemandem Zeit zu greifen ein Pixel horizontal mir erklären verschwenden und dann ist Fliesen, dass der Designer hat mir einen vertikalen Gradienten. Beginnend dunkel oben und endend heller. Das ebenso wie ein Schatteneffekt. Der Schatten verläuft horizontal. Also gibt es keine Möglichkeit, dies zu schneiden und dann einen raffinierten Einsatz von Fliesen zu verwenden, soweit ich weiß.

Quelle

2009-04-28 uriDium

hast du den faux columns Trick gesehen?

Quelle

2009-04-28 20:57:06 dburke

Ja habe ich. Ich hätte das gemacht, aber leider hat der Designer mir eine vertikale Steigung gegeben, also funktioniert das vertikale Schneiden nicht. Ich muss horizontal schneiden. – uriDium

dann einfach nicht wiederholen. – dburke

Aber dann werde ich ein großes Hintergrundbild haben. ABER ich nehme an, dass es in der heutigen Welt der schnellen Internetgeschwindigkeiten wichtig ist, ob ich zwei große Bilder herunterlade? – uriDium

Bei weitem ist der einfachste Weg, dies zu tun, eine einzelne Zeile Tabelle anstelle der divs zu verwenden. Tabellen sind vielleicht nicht die super coole Art, Dinge zu tun, aber am Ende des Tages arbeiten sie nur für viel weniger Code, als zu versuchen, dasselbe mit CSS zu erreichen.

Quelle

2009-04-28 20:35:47 NotMe

Ich habe es gerade richtig mit Tabellen selbst. Ich denke, es ist so ein hacky Weg, es zu tun, aber ich bin an dem Punkt, wo ich denke, was auch immer die Arbeit erledigt. Also, wenn niemand eine Lösung mit CSS und divs bekommen kann, dann werde ich dies als die richtige Antwort wählen. – uriDium

Wie kann ich drei Spalten erhalten, Geschwister divs, jeder erweitern, um seine Eltern zu füllen?

Antwort

Verwandte Themen