Einen Container machen, um ihn mit Inhalt zu füllen?

Question

Ich möchte einen Container erstellen, um es mit Inhalt (meist Text) zu füllen, aber ich weiß nicht, wo ich anfangen soll. Ich versuche es so aussehen zu lassen [this]

die Breite, Höhe, Hintergrundfarbe etc. ist nicht wirklich wichtig.

img { 
 
    width: 300px; 
 
    height: 90px; 
 
    
 
} 
 
    
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #e7e7e7; 
 
    background-color: #fff; 
 
} 
 
    
 
    
 
li { 
 
    float: left; 
 
    border-right:1px solid #bbb; 
 
    border-color: #87CEFA; 
 
    width: 200px; 
 
} 
 
    
 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
    
 
li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 
    
 
li a.active { 
 
    color: white; 
 
    background-color: #4CAF51; 
 
} 
 
    
 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
}

<div class="container"> 
 
    <img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" /> 
 
    
 
    <ul> 
 
     <li><a href="A.html">A</a></li> 
 
     <li><a href="B.html">B</a></li> 
 
     <li><a href="c.html">C</a></li> 
 
     <li><a href="D.html">D</a></li> 
 
     <li><a href="E.html">E</a></li> 
 
    </ul> 
 
</div>

Answer 1

Sie so etwas tun könnte, können Sie die .gray-container Werte ändern, wie Sie

.gray-container { 
 
    background:lightgray; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    min-height: 600px; 
 
    margin-top:20px; 
 
} 
 

 
img { 
 
    width: 300px; 
 
    height: 90px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #e7e7e7; 
 
    background-color: #fff; 
 
} 
 

 
li { 
 
    float: left; 
 
    border-right: 1px solid #bbb; 
 
    border-color: #87CEFA; 
 
    width: 200px; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 

 
li a.active { 
 
    color: white; 
 
    background-color: #4CAF51; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
}

<div class="container"> 
 
    <img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" /> 
 

 
    <ul> 
 
    <li><a href="A.html">A</a></li> 
 
    <li><a href="B.html">B</a></li> 
 
    <li><a href="c.html">C</a></li> 
 
    <li><a href="D.html">D</a></li> 
 
    <li><a href="E.html">E</a></li> 
 
    </ul> 
 
    <div class="gray-container"> 
 
    <h1>123</h1> 
 
    </div> 
 
</div>

Answer 2

Referenz mag: MDN < length > VH

Die Verwendung von Wiewport wird von den meisten Browsern unterstützt und ist gut kompatibel. In Ihrem Fall können Sie einen grauen Container im Hauptdiv hinzufügen.

CSS

.graydiv { 
margin: 0 auto; 
width: 75%; 
height: 100%; 
min-height: 100vh; // that's the trick 
background-color: #ccc; 
border: 1px solid #000; 
} 

HTML

<div class="container"> 
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" /> 

<ul> 
    <li><a href="A.html">A</a></li> 
    <li><a href="B.html">B</a></li> 
    <li><a href="c.html">C</a></li> 
    <li><a href="D.html">D</a></li> 
    <li><a href="E.html">E</a></li> 
</ul> 

<div class="graydiv"> 
123 
</div> 

</div> 

Anschließend können Sie an Ihre Bedürfnisse anpassen, mit margin und padding zu spielen.

HINWEIS: um sicherzustellen, wenn kein Konflikt mit anderen CSS-Stil, ich empfehlen, dass Sie verwenden:

html { 
height: 100%; 
} 

body { 
min-height: 100%; 
margin: 0; 
padding: 0; 
}