1
私のラップトップでは、すべてのコンテンツがそれぞれのコンテナに保存され、各列の高さは問題ありません。私のiPhoneにページをロードすると、高さが違ってコンテンツがお互いにオーバーフローし、メインコンテンツ（イベントの最初の行の後のすべて）が白いコンテナの下に終わります。 Hereは、誰かがhtml/cssを見たいと思えばリンクです（私は何が関連しているのかわからず、ここにいなくてもよいコードで投稿を混乱させたくありません）。フレックスボックスのコンテンツはモバイルのメインコンテナの下を流れる
This is what is wrong with the webpage on mobile.
どのような援助が大幅に高く評価されています。私はflexboxには非常に新しいので、私は理にかなっていない任意のCSSコードをお詫び申し上げます。
HTML
<div class="fluid white large">
<h2>Welcome</h2>
<p>Check <a href="#">Grapevine</a> for updated information on Board of Education presentations and topics of interest!</p>
<div>
<hr/>
<h2>Upcoming Events</h2>
<div class="grid">
<div class="fluid">
<h3>Wednesday, May 4, 2016</h3>
<ul>
<li>AP Exam: English Lit & Composition</li>
<li>AP Exam: Japanese Lang & Culture</li>
<li>AP Exam: Physics 2 - Algebra Based</li>
</ul>
</div>
<div class="fluid">
<h3>Thursday, May 5, 2016</h3>
<ul>
<li>Music Booster</li>
<li>AP Exam: Calculus AB</li>
<li>AP Exam: Calculus BC</li>
<li>AP Exam: Chinese Lang & Culture</li>
</ul>
</div>
</div>
<div class="grid">
<div class="fluid">
<h3>Friday, May 6, 2016</h3>
<ul>
<li>AP Studio Art Last Day to Submit Digital Port</li>
<li>AP Exam: German Lang & Culture</li>
<li>AP Exam: US History</li>
<li>AP Exam: European History</li>
</ul>
</div>
<div class="fluid">
<h3>Monday, May 9, 2016</h3>
<ul>
<li>AP Exam: Music Theory</li>
</ul>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
<div>
<hr/>
<h2>News</h2>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SM_1_srcitizendancing.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Sr. Citizen Prom - Evening at Gastby's</h3>
<p>Highland CSD and Interact Club Present All Highland Sr. Citizens Welcome! Please RSVP to Carly...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_6264MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Music Honor Students Perform in Annual Recital</h3>
<p>The Highland High School auditorium was alive with the sound of music during the Eighth Annual Tri-M Music Honor...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_8095MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland High School Names Top 10 Scholars in Class of 2016</h3>
<p>Highland High School (HHS) has announced the top ten students, including the valedictorian and salutatorian, of the... </p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG959446.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland's Soccer Teams Raise Funds for a Team in Africa</h3>
<p>The Girls and Boys Varsity Soccer teams at Highland High School (HHS) helped get the ball rolling so that a soccer..</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
CSSスタイル...
#container > #brand {
overflow: hidden;
background-color: #3d3d3d;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: center;
width: 100%;
}
#container > nav > ul {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #3d3d3d;
}
#container > nav > ul > li {
list-style: none;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
font-weight: bold;
background-color: #3d3d3d;
}
#content {
margin: 10px auto;
background-color: #3d3d3d;
width: 80%;
color: white;
padding: 10px;
text-align: center;
height: 100%;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.grid > .fluid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
height: 100%;
}
.grid > .large {
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
border: 2px solid gray;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid > .newsLarge {
-webkit-box-flex: 4;
-webkit-flex-grow: 4;
-ms-flex-positive: 4;
flex-grow: 4;
}
質問自体にコードを投稿してください。 http://stackoverflow.com/help/how-to-ask –
Safariの一部のバージョンでは、flexboxが動作するためのベンダー接頭辞が必要です。http://stackoverflow.com/a/35137869/3597276 –
@Michael_B私はすべてを追加しましたコンテナがページの最下部までいっぱいになりますが、内容の間に大きなギャップがあります。 – user2133895