0
Ich versuche ein mobiles responsives Layout zu erstellen, das eine Seitenleiste hat, die sich über die gesamte Seite erstreckt, eine header, und darunter header drei Spalten.Warum werden keine Spalten die Seite hochfahren?
Hier ist ein Link zu dem, was ich zu schaffen versuchen: CodePen
Hier ist der Code:
html {
margin: 0;
padding: 0;
border: 0;
}
* {
border: 1px solid red;
}
body {
margin: 0;
padding: 0;
border: 0;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.container {
height: 100vh;
}
/* media queries */
@media screen and (min-width: 56px) {
.header {
width: 100%;
height: 12vh;
background-color: blue;
}
.sidebar {
width: 100%;
height: 50vh;
background-color: #4e4e4e;
}
.col1,
.col2,
.col3 {
width: 100%;
height: 25vh;
margin: 0 auto;
}
.col1 {
background-color: green;
}
.col2 {
background-color: yellow;
}
.col3 {
background-color: purple;
}
}
/* end of resolution of 56px */
@media screen and (min-width: 864px) {
.header {
width: 75%;
float: right;
}
.sidebar {
width: 25%;
height: 100vh;
float: top left;
}
.threecolumns {
width: 75%;
float: right;
}
.col1,
.col2,
.col3 {
float: left;
width: 33%;
}
}<div class="container">
<div class="header">
HEADER
</div>
<!-- end of header -->
<div class="sidebar">
SIDEBAR
</div>
<!-- end of sidebar -->
<div class="threecolumns">
<div class="col1">
COL1
</div>
<!-- end of column1 -->
<div class="col2">
COL2
</div>
<!-- end of column 2 -->
<div class="col3">
col1
</div>
<!-- end of column 3 -->
</div>
<!-- end of three columns -->
</div>
<!-- end of container -->Bei einer Auflösung von 864px, versuche ich zu machen Die drei Säulen fahren den Hauptcontainer hinauf. Im Moment hängen sie nur am unteren Rand des Layouts.
Meine Frage: Warum sind meine drei Spalten nicht auf dem Container, und was kann ich dagegen tun?
Alle Informationen würden sehr geschätzt werden.
... und 'box-sizing: border-box'. - http://codepen.io/Paulie-D/pen/JXwZve –
Ich wollte das hinzufügen, weil ich in meinen Code eingefügt habe, vergessen zu erwähnen – dippas
Danke Paulie und Dippas! Ich schätze deine Hilfe sehr! Es bedeutet mir viel! – Toddsqui