我学习css和html基础知识并遇到麻烦。我的方面flexbox（aside1）不包含我的侧导航栏（内容）。导航栏覆盖主Flexbox（主）。我翻过网络，但找不到可行的解决方案。
另外我的第三个弹箱（旁边2）采用自动高度，但我想要它，例如，4em高。如果我分配它，它可以工作，但然后主Flexbox不会向上移动，但只是坚持他以前的位置。
小提琴：http://jsfiddle.net/zuzfvufz/
感谢您的帮助。
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%;
}
}
再次感谢！
答案 0 :(得分：0)
我找到了解决方案，为什么我的列表覆盖了内容而没有包含在flexbox中。这是因为我有显示：固定分配在ul。此外，我设法修复侧导航栏，将其包装在一个额外的div中。 https://jsfiddle.net/zuzfvufz/2/
.aside-2 {
background: white;
margin-top: 0;
color: black;
flex: 0 0 100%;
}
.content-wrapper{
position: fixed;
}
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
}
<aside class="aside aside-1">
<div class="content-wrapper">
<ul class="content">
<p>Table of content</p>
<li><a href="#slovenia">Slovenia</a></li>
<li><a href="#belgium">Belgium</a></li>
<li><a href="#spain">Spain</a></li>
<li><a href="#mexico">Mexico</a></li>
<li><a href="#japan">Japan</a></li>
<li><a href="#indonesia">Indonesia</a></li>
</ul>
</div>
</aside>