html - Flexbox 和固定侧导航栏-6ren

html - Flexbox 和固定侧导航栏

转载作者：行者123 更新时间：2023-11-28 05:01:24

我正在学习 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&#39;s favourite late night meal. It&#39;s also the perfect example of an imported dish &#45; in this case from China &#45; 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&#39;s in the variety of flavours and textures &#45; like tangy, creamy uni (sea urchin meat) and plump, juicy, ama-ebi (sweet shrimp) &#45; that things get interesting. Despite sushi&#39;s
                lofty image, it has a humble origin: street food.
            </p>
            <h3>Tempura</h3>
            <p>
                Light and fluffy tempura is Japan&#39;s contribution to the world of deep-fried foods (though it likely originated with Portuguese traders). The batter&#45;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&#45;flavoured broth spiked with grated radish for dipping. Do not miss out on ebi&#45;ten (tempura prawns).
            </p>
            <h3>Okonomiyaki</h3>
            <p>
                Literally &#34;grilled as you like,&#34; okonomiyaki is Japanese comfort food at its best, and a clear violation of the typical refined image of Japanese food. It&#39;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&#45;style sauce. It&#39;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 &#34;mol&#45;eh&#34;), 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&#45;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/

文章推荐： javascript - 删除播放列表视频 youtube api v3

文章推荐： php - mod_rewrite 的简单通配符？

文章推荐： html - 水平菜单适合 100%，文本堆叠在左侧

文章推荐： css - 创建一组垂直按钮 - Ionic

html - 具有全屏高度的 3 列布局(固定-流体-固定)
我正在尝试实现 3 列固定-流体-固定布局。此外，布局的高度必须占据整个屏幕，使其看起来像从上到下的 3 个实心列。总结: Left-column: fixed-width Center-col
html - 具有最小宽度的 3 列布局(固定、流动、固定)
我在网上搜索过，似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。我希望有 3 列布局，左列固定为 200px，右列固定为 200px，中间列为剩余宽度，但最小宽度为 600px。所以整体最
css - 如何创建 3 列布局(固定、固定、流动)
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
audio - 音频归一化/固定？
我正在使用一些音频指纹技术来标记长录音中的歌曲。例如，在广播节目中的记录。指纹机制工作正常，但我在归一化(或下采样)方面遇到问题。在这里您可以看到两首相同的歌曲，但波形不同。我知道我应该进行一些直流
c++ - 固定，设定精度功能
为什么使用cout调用setprecision和fixed以及其他iomanip函数不像例如name.find('')plz这样的字符串函数最佳答案它们允许您以以下方式链接操作: cout <<
jquery - 固定/跟随侧边栏的问题
我正在尝试创建一个侧边栏，当用户向下滚动页面时，该侧边栏会跟随用户，并且我设法使用以下代码实现了效果: 标记 Javas
macos - 内存是否被锁定(固定)？
我正在尝试设置一些性能分析以及影响缓冲策略的运行时决策。我的应用程序收到一个指向由库(CUDA 或 OpenCL)分配的缓冲区的指针。如何测试内存区域是否被页面锁定？据我所知，POSIX 给了我们
C# - 固定/内联数组
我正在用 C# 编写一个 B+ 树实现，我为我的应用程序选择的树实现有一个非常特定的结构，它是缓存敏感的。为了实现这些属性，它对树节点有严格的布局策略。我想要的只是使用 C# 的 fixed 来表达
Android，在屏幕底部定位一个元素，固定
我试图通过将 fragment 注入(inject)容器来在每个屏幕的底部放置一个广告 View 。通过使用 LinearLayout，我可以将 adview 置于操作栏下方的顶部。我已经尝试了 Re
jquery - 导航 - 固定
我正在尝试创建一个导航稍微复杂的网站。我已经让导航看起来像我想要的初始加载，但现在我试图让它粘性导航到滚动顶部。我已经能够在导航栏到达顶部时创建一个类，但无法使其粘滞。每次我添加一个位置时，它都会跳回
css - 固定、动态高度元素占用空间的解决方案
首先，我正在寻找一个纯 CSS 解决方案。我可以使用 JavaScript 非常轻松地做到这一点，所以不要费心给我提示如何在 JS 中做到这一点。我有一个包含 3 个容器的网页。其中 2 个是固定的
CSS 固定/绝对定位到较早的亲戚？
我猜这里有一种 super 特例。我正在处理许多包含。现在我正在一个包含的内容文件中编码。我需要一个灯箱，它有一个 20% 的黑色背景覆盖整个页面，包括本身固定的标题，并在先前的 PHP 文件中设置
css - 固定/相对定位 :
我正在尝试制作一个包含两个“固定”侧边栏图像和一个“固定”标题图像的页面。由于标题是固定的(距顶部 0 到 10%)。我不希望页眉图像与页面上的任何文本重叠。我尝试将段落标记定位为“相对”，并将其设置
CSS:居中位置:固定
我遇到了一个(水平)居中固定位置元素的解决方案，如下所示: element { width: 200px; position: fixed; left: 0; righ
HTML 正文高度 - 固定？
我试图让我的网站主体具有固定的高度(我想!)。无论如何，站点正文只是白色，边框大小为 1。基本上，正文的大小取决于其中的内容，例如，随着添加更多内容，它会自动调整大小。我想要的是垂直滚动条，这样主
css 布局(固定)
是否可以在 css 中创建 master-detail-states 布局？我需要 3 个占位符: +---------------+-------+ | A | B
同一请求中的 SSL 固定
我的问题是，我是否必须在每个 Get/Post 请求之前单独请求检查 SSL Pinning OkHttpClient client = new OkHttpClient.Builder().cert
algorithm - (固定)平衡树的摊销成本
假设我有一个具有 N 个节点的常量(一旦构建就不会改变)平衡树，每个内部节点都有 p 个子节点。显然，访问节点的最坏情况是 logp(N)。但是访问 r 个节点的摊销成本呢？如果我们按升序访问它们(有
php - 如何防止php项目中的 session 固定？
我知道会话固定是用php破解网站的方法。会话固定是一种允许攻击者劫持有效用户会话的攻击 session fixation 但我不知道这可以防止我的项目中出现此问题。是描述解决方案的方式或样本。最
jQuery Masonry 固定/前置元素
我在 jquery 砖石布局内有一个导航元素，我想将其修复到特定位置，比如右上角。是否可以这样做，以便所有其他元素都位于它周围？诸如前置导航之类的东西.. 这是我的代码:http://jsfiddl

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Flexbox 和固定侧导航栏