Flex-Zeile vs colum Hilfe, Layout nicht wie vorgesehen angezeigt

-1

Ich habe auf diesem für ein paar Tage fest, egal was ich tun, kann ich nicht das Layout, um wie gewünscht funktionieren. Kann mir jemand helfen, dieses Layout zu vervollständigen, damit ich das Konzept hoffentlich verstehen kann.Flex-Zeile vs colum Hilfe, Layout nicht wie vorgesehen angezeigt

Ich dachte, das sollte funktionieren wie gewünscht, aber nicht.

Das erste Flex-Elternteil (main) hat 3 Zeilen Kinder (links/Mitte/rechts). Der untergeordnete Container (Mitte) sollte ein weiteres Flex-Elternelement (Sub) enthalten, das über drei untergeordnete Spalten verfügt (header/content/footer). Wenn Inhalt überläuft, sollte die Seite nach unten expandieren (was sie nicht tut) und wenn es keinen Inhalt gibt, sollte die Seite Höhe und Breite ausfüllen (was sie nicht tut).

Hier ist eine visuelle Darstellung, die ich in Farbe gemacht habe, um mein Problem zu verstehen.

Layout Image

JSFIDDLE Link

Die Verhältnisse in (Header/Content/Footer) arbeiten nicht und tun 100% Höhe in der .sub .content die Seite in die falsche Art und Weise überläuft ..

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <style> 
     * { 
      margin:0px; 
      border:0px; 
     } 
     .main{ 
      margin-top:-20px; 

      height:100%; 
      display:flex; 
      flex-direction:row; 
     } 

     .main .left{ 
      background:#009246; 
      flex: 1; 
     } 
     .main .center{ 
      background:#F1F2F1; 
      flex: 3; 
     } 
     .main .right{ 
      background:#CE2B37; 
      flex: 1; 
     } 
     .sub{ 
      width:100%; 
      flex-direction:culumn; 
     } 
     .sub .header{ 
      background:blue; 
      flex: 1; 
     } 
     .sub .content{ 
      background:orange; 
      flex: 5; 
     } 
     .sub .footer{ 
      background:blue; 
      flex: 1; 
     } 
    </style> 

</head> 
<body> 
    <div class="main"> 
    <div class="left">left</div> 
    <div class="center">center</div> 
     <div class="sub"> 
      <div class="header">header</div> 
      <div class="content">content</div> 
      <div class="footer">footer</div> 
     </div> 
    <div class="right">right</div> 
    </div> 
</body> 
</html>

Quelle

2016-04-15 John Doe

wie erwähnt, haben Sie einen Fehler in der HTML-Struktur.

Für den CSS-Teil, können Sie Flex-Container schuppige und erben Höhe von HTML und verwenden Sie nur min-height auf Hauptbehälter: https://jsfiddle.net/qmwymy26/4/

 * { 
 
      margin: 0px; 
 
      border: 0px; 
 
     } 
 
     .main { 
 
      min-height: 100%; 
 
      display: flex; 
 
      flex-direction: row; 
 
     } 
 
     .main .left { 
 
      background: #009246; 
 
      flex: 1; 
 
     } 
 
     .main .center { 
 
      background: #F1F2F1; 
 
      flex: 3; 
 
      display: flex; 
 
      flex-direction: column; 
 
     } 
 
     .main .right { 
 
      background: #CE2B37; 
 
      flex: 1; 
 
     } 
 
     .sub { 
 
      display: flex; 
 
      width: 100%; 
 
      flex-direction: column; 
 
      flex: 1; 
 
     } 
 
     .sub .header { 
 
      background: blue; 
 
      flex: 1; 
 
     } 
 
     .sub .content { 
 
      background: orange; 
 
      flex: 5; 
 
     } 
 
     .sub .footer { 
 
      background: blue; 
 
      flex: 1; 
 
     } 
 
     html, 
 
     body { 
 
      height: 100% 
 
     } 
 
:checked ~ br {display:none;} 
 
label {font-size:2em;}

<div class="main"> 
 
    <div class="left">left</div> 
 
    <div class="center">center 
 
    <div class="sub"> 
 
     <div class="header">header</div> 
 
     <div class="content"> 
 
     <label for="hd">click me to hide br tags </label><input type="checkbox" id="hd" /> 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/>content 
 
     <br/> 
 
     </div> 
 
     <div class="footer">footer</div> 
 
    </div> 
 
    </div> 
 
    <div class="right">right</div> 
 
</div>

Quelle

2016-04-16 01:36:17

Sie haben einen Markup-Fehler.

<div class="center">center<!--/div not here--> 
    <div class="sub"> 
     <div class="header">header</div> 
     <div class="content">content</div> 
     <div class="footer">footer</div> 
    </div> 
</div><!-- finish here instead -->

Und in CSS benötigen Sie align-items:stretch; zu .main

.main{ 
     height:100%; 
     display:flex; 
     flex-direction:row; 
     align-items:stretch; //add this... 
}

auch einige Polsterung zum Aktualisiert hinzufügen .center

.main .center{ background:#F1F2F1; flex: 3; padding:20px; /* add this */ }

hinzufügen Fiddle

Quelle

2016-04-16 00:05:21 Roy

Flex-Zeile vs colum Hilfe, Layout nicht wie vorgesehen angezeigt

Antwort

Verwandte Themen