文章/答案/技术大牛

发布

社区首页 >问答首页 >全高度侧边栏，与有柔性盒的Wordpress一样

问全高度侧边栏，与有柔性盒的Wordpress一样
EN

Stack Overflow用户

提问于 2018-07-02 16:48:15

回答 1查看 30关注 0票数 1

我正在开发一个带有工具侧栏的web应用程序。虽然内容是流动的，但侧边栏必须有固定的宽度。

我试着使用柔性盒，但是主框只考虑视口的高度，而不是整个站点的内容。在这里我所做的：

https://jsfiddle.net/junihh/eup7m608/3/

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                vertical-align: baseline;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                list-style: none;
                outline: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
                font: normal 18px/120% Helvetica,Arial,sans-serif;
            }

            article, aside {
                padding: 0;
                margin: 0;
                border-radius: 0;
            }

            body {
                display: flex;
                flex-direction: column;
            }

            header, footer {
                height: 100px;
            }

            .main {
                display: flex;
                flex-direction: row;
                flex: 1;
            }

            article {
                flex: 5;
                background-color: #EEE;
            }

            aside {
                background-color: #333;
                flex: 1;
                color: #CCC;
                width: 360px;
            }

            .margin {
                padding: 25px;
            }

            h1 {
                margin-bottom: 25px;
                font-size: 24px;
                font-weight: bold;
            }

            p {
                margin-bottom: 14px;
                line-height: 140%;
            }
        </style>
    </head>
    <body>
        <section class="main">
            <aside>
                <div class="margin">
                    <h1>Aside</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </aside>
            <article>
                <div class="margin">
                    <h1>Article</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </article>
        </section>
    </body>
</html>

我甚至尝试固定位置的侧栏，但失败的东西，我需要。

能帮上什么忙吗？我需要像Wordpress侧边栏这样的东西。

css

flexbox

sidebar

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-02 16:55:49

我修正了你的风格。您错误地放置了display: flex for <body>，这阻止了它随着内容的增长。

关键部分

基本上，我所做的就是删除这些行：

body {
    display: flex;
    flex-direction: column;
}

片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                vertical-align: baseline;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                list-style: none;
                outline: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
                font: normal 18px/120% Helvetica,Arial,sans-serif;
            }

            article, aside {
                padding: 0;
                margin: 0;
                border-radius: 0;
            }

            header, footer {
                height: 100px;
            }

            .main {
                display: flex;
                flex-direction: row;
                flex: 1;
                align-self: stretch;
                min-height: 100%;
            }

            article {
                flex: 5;
                background-color: #EEE;
            }

            aside {
                background-color: #333;
                flex: 1;
                color: #CCC;
                width: 360px;
            }

            .margin {
                padding: 25px;
            }

            h1 {
                margin-bottom: 25px;
                font-size: 24px;
                font-weight: bold;
            }

            p {
                margin-bottom: 14px;
                line-height: 140%;
            }
        </style>
    </head>
    <body>
        <section class="main">
            <aside>
                <div class="margin">
                    <h1>Aside</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </aside>
            <article>
                <div class="margin">
                    <h1>Article</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </article>
        </section>
    </body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51140544

复制

相似问题

问全高度侧边栏，与有柔性盒的Wordpress一样
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全高度侧边栏，与有柔性盒的Wordpress一样EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全高度侧边栏，与有柔性盒的Wordpress一样
EN