0
私はCSSとHTMLの基本を学んでいて問題に陥っています。私のサイドフレックスボックス（aside1）にサイドナビゲーションバー（コンテンツ）が含まれていません。 navbarはメインのフレックスボックス（メイン）を覆っています。私はウェブをひっくり返しましたが、うまくいく解決策は見つかりませんでした。フレックスボックスと固定側のナビゲーションバー
また、私の3番目のフレックスボックス（aside-2）は自動高さをとりますが、例えば4em高いようにします。私がそれを割り当てても動作しますが、メインのフレックスボックスは上に動かずに前の位置に留まります。
フィドル：助けを
感謝。
HTML：
<head>
<title>Munchies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="world.html">Around the globe</a></li>
<li class="nav-item"><a href="where.html">Where to eat?</a></li>
<li class="nav-item"><a href="recipes.html">Recipes</a></li>
<li class="nav-item"><a href="about.html">About me</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrapper">
<article class="main">
<h1>Food around the world</h1>
<h2 id="japan" class="anchor">Japan</h2>
<h3>Ramen</h3>
<p>
Ramen, egg noodles in a salty broth, is Japan's favourite late night meal. It's also the perfect example of an imported dish - in this case from China - that the Japanese have made completely and deliciously their own. There are four major
soup styles: tonkotsu (pork bone), miso, soy sauce and salt. Fukuoka is particularly famous for its rich tonkotsu ramen; pungent miso ramen is a specialty of Hokkaido.
</p>
<img src="https://gourmetadventuresnet.files.wordpress.com/2014/02/chashu-shoyu-ramen-gourmet-adventures.jpg" alt="ramen" class="responsive-image" />
<h3>Sushi</h3>
<p>
Put simply, sushi is raw fish served on rice seasoned lightly with vinegar. It's in the variety of flavours and textures - like tangy, creamy uni (sea urchin meat) and plump, juicy, ama-ebi (sweet shrimp) - that things get interesting. Despite sushi's
lofty image, it has a humble origin: street food.
</p>
<h3>Tempura</h3>
<p>
Light and fluffy tempura is Japan's contribution to the world of deep-fried foods (though it likely originated with Portuguese traders). The batter-coated seafood and vegetables are traditionally fried in sesame oil and served with either a tiny pool
of salt or a dish of soy sauce-flavoured broth spiked with grated radish for dipping. Do not miss out on ebi-ten (tempura prawns).
</p>
<h3>Okonomiyaki</h3>
<p>
Literally "grilled as you like," okonomiyaki is Japanese comfort food at its best, and a clear violation of the typical refined image of Japanese food. It's a savoury pancake filled with any number of things (but usually cabbage and pork) and topped with
fish flakes, dried seaweed, mayonnaise and a Worcester-style sauce. It's also a lot of fun: At most restaurants, diners grill the dish themselves at a hotplate built into the table.
</p>
</article>
<article class="main">
<h2 id="mexico">Mexico</h2>
<h3>Mole</h3>
<p>Three states claim to be the original home of mole (pronounced "mol-eh"), a rich sauce popular in Mexican cooking.
There are myriad types of mole but all contain around 20 or so ingredients, including one or more varieties of chilli peppers, and all require constant stirring over a long period of time.
Perhaps the best-known mole is mole poblano, a rusty red sauce typically served over turkey or chicken.
</p>
</article>
<aside class="aside aside-1">
<ul class="content">Table of content
<li><a href="#japan">Japan</a></li>
<li><a href="#mexico">Mexico</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
<li><a href="">eeeeee</a></li>
</ul>
</aside>
<aside class="aside aside-2">
MUNCHIES
</aside>
</div>
</body>
</html>
CSS：再び
/*CSS reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*Navigation menu*/
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: rgb(35, 36, 35);
}
/*List items width in navigation menu*/
.nav-item {
width: 200px;
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
/*Appearance for navigation menu links*/
.nav-item a {
display: block;
padding: 1em;
background: rgb(35, 36, 35);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: background 0.5s;
}
/*Changing the color of the link when hovering over with the cursor*/
.nav-item a:hover {
background: black;
}
/* Site wrapper, using flexbox*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.wrapper {
flex: 1 100%;
min-height: 100%;
min-width: 100%;
background-color: rgb(237, 237, 237);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 0em;
background-size: 200%;
}
.main {
padding: 1em;
flex: 1 100%;
text-align: justify;
background: rgb(237, 237, 237);
order: 3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
}
.aside-1 {
padding-top: 1em;
padding-left: 5em;
padding-right: 5em;
padding-bottom: 1em;
margin-top: 0em;
flex: 1 100%;
background: rgb(224, 224, 224);
order: 2;
}
.aside-2 {
padding: 10px;
margin-top: 0em;
flex: 1 100%;
background: rgb(55, 60, 57);
order: 1;
font-size: 40px;
color: white;
}
.responsive-image {
max-width: 100%;
}
/*Navigation trigger*/
.nav-trigger {
/*hide the checkbox input*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*critical positioning styles */
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
/*styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger+label, .wrapper {
transition: left 0.3s;
}
.nav-trigger:checked+label {
left: 215px;
}
.nav-trigger:checked~.wrapper {
left: 200px;
}
html, body {
height: 100%;
}
body {
/*Without this, the body has excess horizontal scroll when the menu is open*/
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1, h2, h3, p {
margin-left: 1em;
margin-right: 1em;
}
h1, h2, h3 {
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.recipe {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 15em;
margin: auto;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(35, 36, 35);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 1em;
}
#social img {
display: inline-block;
height: 35px;
width: 35px;
margin: 1em 1em 1em 1em;
float: left;
}
.anchor:before {
content: "";
display: block;
height: 50px;
/* fixed header height*/
margin: -50px 0 0;
/* negative fixed header height */
}
.index {
max-width: 40%;
border-radius: 25px;
margin: auto;
display: block;
}
/*Tablets responsive*/
@media all and (min-width: 700px) {
.main {
padding: 10px;
flex: 1 100%;
}
h1, h2, h3, p {
margin-left: 5em;
margin-right: 5em;
}
.recipe {
margin-left: 5em;
margin-right: 5em;
}
.aside-1 {
padding: 10px;
flex: 1 100%;
font-size: 18px;
/*position: fixed;*/
height: 100%;
}
.aside-2 {
background: red;
margin-top: 1em;
}
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 6em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 20%;
height: 6em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 6em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
text-align: center;
padding-top: 2.3em;
border-left: 1px solid rgb(237, 237, 237);
border-right: 1px solid rgb(237, 237, 237);
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
body {
margin-top: 3em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
}
/*Desktop responsive*/
@media all and (min-width: 900px) {
.main {
padding: 10px;
flex: 1 80%;
}
h1, h2, h3, p {
margin-left: 5em;
margin-right: 5em;
}
.aside-1 {
padding: 10px;
font-size: 18px;
flex: 1 0 20%;
height: 100%;
}
.aside-2 {
background: red;
margin-top: 0;
}
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 3em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: auto;
height: 3em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 3em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
padding: 1em;
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
body {
margin-top: 3em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
margin-top: 6em;
position: fixed;
left: 4em;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 5em;
}
.index {
max-width: 40%;
}
}
ありがとう！
問題を再現するフィドルを作成できますか？ –
https://jsfiddle.net/zuzfvufz/#&togetherjs=JOHFvsOaCUうまくいけば、初めてフィドルを使って動作します。この問題はデスクトップ版で発生します。 –