デスクトップに横並びに3つ並んでいる間に、モバイルビューで水平にスタックして100％の画面を表示することはできません。

Question

私はこのフォーラムで提供されているいくつかのソリューションを試してみましたが、 は、ここに私のコードです（私はデスクトップビューでお互いに次の3つの別々のdivをしたいが、互いに上に、スタックおよびモバイルに広い100％を埋めるために）

モバイルレイアウト：以下480PXと：

.gridContainer { 
    width: 100%; 
    overflow: hidden; 
    background-color: #FFF; 
     } 
#bnr1 { 
    float: left; 
    display: block; 
    color: #FFF; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 32px; 
    text-align: left; 
    padding-top: 5px; 
    padding-right: 15px; 
    padding-bottom: 15px; 
    padding-left: 20px; 
    margin-right: 5px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    visibility: visible; 
    overflow: visible; 
    height: auto; 
    background-color: #9C0; 
    clear: right; 
    width: 100%; 
    margin-top: 0px; 
} 

#maincontent { 
    width: auto; 
    margin: 0px; 
    padding: 0px; 
} 

#footer { 
    clear: none; 
    float: left; 
    width: 100%; 
    display: block; 
    background-color: #000; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 10px; 
    color: #FFF; 
    text-decoration: none; 
    padding-left: 5px; 
    text-align: center; 
    margin-top: 10px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding-top: 5px; 
    padding-right: 5px; 
    padding-bottom: 5px; 
} 
#bnrpic { 
    width: 70%; 
    display: block; 
    padding: 0px; 
    overflow: visible; 
    -webkit-transition: border-top-width, opacity 2000s ease-in-out 2s; 
    -moz-transition: border-top-width, opacity 2000s ease-in-out 2s; 
    -ms-transition: border-top-width, opacity 2000s ease-in-out 2s; 
    -o-transition: border-top-width, opacity 2000s ease-in-out 2s; 
    margin-bottom: 5px; 
    height: 400px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-left: 0px; 
} 
#LayoutDiv1 { 
    text-align: left; 
     } 
#LayoutDiv2 { 
    text-align: left; 
    } 
#LayoutDiv3 { 
     text-align: left; 
} 

Answer 1

はdivタグfloat: leftとwidth: 33,3%を与える、その後、ブレークポイント

.class { 
    width: 33.3%; 
    float: left; 
} 

@media (max-width: 480px) { 
    .class { 
     width: 100%; 
    } 
} 

フィドル下width: 100%here

Answer 2

身長のプロパティに "vh"単位を使用することができます。 基本的には、ブラウザの高さで要素サイズのサイズを設定します。 詳細については、ご確認ください。 https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

チェックこのサンプルコード：

<div class="main">1</div> 
<div class="main">2</div> 
<div class="main">3</div> 

、ここでは、CSSです：

/*you have to reset browser to default to avoid problems*/ 
.main{ 
width: 32%; 
height: 100px; /*any size you want*/ 
background-color: black; 
float: left; 

/*Just for text and border*/ 
    border-right: 2px white solid; 
    color: white; 
    font-size: 600%; 
    text-align: center; 
    } 

@media screen and (max-width: 480px) { 
.main{ 
    width: 100%; 
    height: 100vh; 
    background-color: black; 
    min-height: 200px;/*define your min-height 
    because your content could mess*/ 

    /*Just for text and border*/ 
    border: none; 
    border-bottom: 2px white solid; 
} 
} 

見ての通り、私は（VHユニットで）400ピクセルまでのデバイス用の新しいスタイルを定義します。 結果は次のようになります。 https://codepen.io/coderdisco/pen/VWvRdK