Question

我想要修复内容标题，以便内容滚动到下面。这是使用带有可滚动内容区域的flexbox的经典圣杯布局。

我已经尝试将内容标题设置为固定位置并添加填充，但是它不会占用内容区域的整个宽度。

html, body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.holy-grail {
    display: flex;
    height: 100%;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}

.holy-grail-body {
    display: flex;
    flex: 1;

}

.holy-grail-content {
    flex: 1;
    background: #ffc94e;
    overflow: auto;
}

.holy-grail-content-header {
    background: lightyellow;
  height: 50px;
}

.holy-grail-nav, .holy-grail-sidebar {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
    background: #c9ea5d;
}

.holy-grail-nav {
    /* put the nav on the left */
    order: -1;
    background: #85d6e4;
}

header {
    background: #92e4c9;
}

footer {
    background: #f7846a;
}

* {
    color: #333;
}

<!doctype html>
<html lang="en">
<head>
    <title>A Holy Grail Flexbox layout</title>


</head>
<body class="holy-grail">
<header>
    <h1>Header</h1>
</header>
<div class="holy-grail-body">
    <main class="holy-grail-content">
      <header class="holy-grail-content-header">Content Header</header>
        TEST
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
    </main>
    <nav class="holy-grail-nav">
        <h2>Navigation</h2>
    </nav>
    <aside class="holy-grail-sidebar">
        <h2>Sidebar</h2>
    </aside>
</div>
<footer>
    <h2>Footer</h2>
</footer>
</body>
</html>

Answer 1

我想通了，也许有更好的解决方案，欢迎提出意见，但这似乎有效。我基本上为内容创建了另一个flexbox列，然后添加了一个标题，这与外部flexbox列标题，内容，页脚的工作方式相同。

以下是完成的代码

html, body {
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
}

*, *:before, *:after {
    box-sizing: inherit;
}


.holy-grail {
    display: flex;
    flex-direction: column;
}

.holy-grail-body {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.holy-grail-content {
    flex: 1 1 auto;
    background: #ffc94e;
    display: flex;
    flex-direction: column;
    order: 2;
}

.holy-grail-content-header {
    background: lightyellow;
    flex: 0 0 50px;
}

.content {
    flex: 1;
    overflow:auto;
}

.holy-grail-nav, .holy-grail-sidebar {
    /* 12em is the width of the columns */
    flex: 0 0 10em;
    background: #c9ea5d;
}

.holy-grail-nav {
    /* put the nav on the left */
    order: 1;
    background: #85d6e4;
}
.holy-grail-sidebar {
    order: 3;
}
header {
    background: #92e4c9;
    height: 50px;
    
}

footer {
    background: #f7846a;
    height: 50px;

}

* {
    color: #333;
}

<!doctype html>
<html lang="en">
<head>
    <title>A Holy Grail Flexbox layout</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
    <h1>Header</h1>
</header>
<div class="holy-grail-body">
    <main class="holy-grail-content">
      <header class="holy-grail-content-header">Content Header</header>
        <div class="content">TEST
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
        TestEnd
        </div>
    </main>
    <nav class="holy-grail-nav">
        <h2>Navigation</h2>
    </nav>
    <aside class="holy-grail-sidebar">
        <h2>Sidebar</h2>
    </aside>
</div>
<footer>
    <h2>Footer</h2>
</footer>
</body>
</html>

修复了具有可滚动内容区域的Flexbox布局的内容标题

1 个答案: