我正在学习 css 和 html 基础知识，但遇到了麻烦。我的侧面 flexbox (aside1) 不包含我的侧面导航栏(内容)。导航栏覆盖了主要的 flexbox (main)。我翻遍了网络，但没有找到可行的解决方案。
我的第三个 flexbox (aside-2) 也采用自动高度，但我希望它是，例如，4em 高。如果我分配它，它可以工作，但主 flexbox 不会向上移动，而是保持在他之前的位置。
fiddle :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%;
}
}
再次感谢!
最佳答案
我找到了为什么我的列表覆盖了内容而不是包含在 flexbox 中的解决方案。这是因为我在 ul 上分配了 display: fixed。我还设法修复了侧面导航栏，将其包装在一个额外的 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>
关于html - Flexbox 和固定侧导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40091467/