0
サイドバーがページ全体（1つはheader、もう1つはheader、下は3列）に及ぶモバイルレスポンスレイアウトを作成しようとしています。ここでなぜ列がページに乗っていないのですか？
は、私が作成しようとしています何へのリンクです：ここではCodePen
はコードです：864pxの解像度で
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 -->、私が作るしようとしています3つの列がメインコンテナに乗ります。今は、彼らはちょうどレイアウトの一番下にぶら下がっています。
私の質問：なぜ3列目がコンテナに乗っていないのですが、どうすればいいですか？
いずれの情報も高く評価されます。
...と 'box-sizing：border-box'です。 - http://codepen.io/Paulie-D/pen/JXwZve –
私のコードに追加したので、私はそれを追加しようとしていましたが、 – dippas
ポーリーとディッパに感謝します！私は本当にあなたの助けに感謝します！私にとっては大きな出来事です！ – Toddsqui