我的布局有彼此相反的部分，有四个。它们包含一个侧面和一个主容器。旁白保持固定在屏幕上，无论它在屏幕的哪一侧。我想更改它，以便侧面占据屏幕高度的 100%。现在，当我尝试将其高度显式更改为 100% 或 vh 时，它会破坏布局。主容器将是它所包含的内容的高度，就像现在一样。(在 Main 滚动到结束之前，旁部分保持固定。此时，整个屏幕滚动到下一部分，现在倒置，主侧和侧边切换。
这就是布局应该像这样...http://melaniedaveid.com/
编辑：更新的代码： https://codepen.io/marti2221/pen/LLKpbp
<section>
<aside>
<div id="container-black">
<p id="hello">Hello</p>
<div id="container-nav">
<p id="how">How</p>
<p id="are">are</p>
<p id="you">you</p>
</div>
</div>
</aside>
<main>
<div class="inner">
<h1>heading</h1>
<p>
main ainadf asdfhkad dsafdsd dfds s s adfj adfja dx nadf asdfnadf asdfhkad dsafdsd dfds s s adfj adfja dxadf asdfhkad dsafdsd dfds adfj adfja dx
</p>
<h1>heading</h1>
<p>
main ainadf asdfhkad dsafdsd dfds s s adfj adfja dx nadf asdfnadf asdfhkad dsafdsd dfds s s adfj adfja dxadf asdfhkad dsafdsd dfds adfj adfja dx
</p>
<h1>heading</h1>
<p>
main ainadf asdfhkad dsafdsd dfds s s adfj adfja dx nadf asdfnadf asdfhkad dsafdsd dfds s s adfj adfja dxadf asdfhkad dsafdsd dfds adfj adfja dx
</p>
<h1>heading</h1>
<p>
main ainadf asdfhkad dsafdsd dfds s s adfj adfja dx nadf asdfnadf asdfhkad dsafdsd dfds s s adfj adfja dxadf asdfhkad dsafdsd dfds adfj adfja dx
</p>
</div>
</main>
</section>
* {box-sizing:border-box;}
section {
width: 100%;
height: 400px;
overflow-y: scroll;
margin: auto;
display: flex;
background: gray;
}
section:nth-child(even) main {
order: -1;
}
aside,main {
flex: 1 0 50%;
}
aside{
display: flex;
overflow: hidden;
justify-content: center;
}
#container-black{
display: flex;
flex-direction: column;
height: 100%;
width: 50%;
justify-content: flex-end;
}
#hello{
background: blue;
flex:.6;
align-self: center;
}
#container-nav {
background:white;
display: flex;
flex-direction: row;
justify-content: space-around;
}
aside,.inner {
padding: .5em;
}
aside {
background: #eee;
position: sticky;
top: 0; left: 0;
}
main {
position: relative;
color: white;
}
.inner {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
另外，如果有任何方法可以摆脱内部滚动。相同的布局，只有一个滚动条。
重写
在您更改代码笔后，我的答案需要重写，因为基本上规则已更改。
.CSS
- 为了能够更好地理解您的CSS，我上下移动了一些内容以获得"逻辑流程"。
- 将规则放在同一行以压缩代码段视图
- 在我进行更改的代码中添加了注释
- 通过在 20rem 上为小于40rem的显示宽度创建弹性换行，增加了移动/桌面的响应能力
.HTML
- 将
<h1>和<articles放入自己的容器<div> - 用于上面的修改，通过隐藏具有类
.ns-outer的main的滚动条并启用容器<div>滚动条来创建隐藏的滚动条效果，但使用类.ns-inner隐藏在视图中
链接
代码笔"堆栈溢出45178572">
不要期望此代码像给定的示例站点一样流畅运行，该站点使用一些外部库，但肯定应该为您指明正确的方向。
片段
* { box-sizing: border-box }
/* ADD, to remove (HTML default) page outer margin */
body { margin: 0 }
/*
MOD/ADD: only on larger displays (width>640) because content will wrap
and this would mess up nice LEFT/RIGHT inverted layout.
*/
@media screen and (min-width: 40rem) { /* 320px + 320px, See "aside, main" below */
section:nth-child(even) main { order: -1 }
}
section { display: flex;
flex-flow: row wrap; /* ADD enable it to wrap on small displays */
width: 100%; height: 100vh; /* MOD 685px to 100vh */
margin: 0 auto; /* MOD to "0 auto", will center itself in body. (Change width to 80% to see effect) */
/* REMOVE overflow-y: scroll; */
background: gray }
aside { display: flex; overflow: hidden; justify-content: center;
background: #eee; top: 0; left: 0 }
aside, .inner { padding: .5em }
aside, main { flex: 1 1 20rem } /* MOD so they wrap on screens smaller than 320px + 320px */
/* Works in conjunction with "@media section..." */
main { position: relative; color: white }
article, h1 { margin: 15px 100px }
h1 { margin-top: 50px }
#container-black { display: flex; flex-direction: column; height: 100%; width: 50%; justify-content: flex-end }
#hello { background: blue; flex: .6; align-self: center } /* removed "sticky" */
#container-nav { background: white; display: flex; flex-direction: row; justify-content: space-around }
/* nice little hidden scollbar trick */
.ns-outer { position: relative; overflow: hidden }
.ns-inner { position: absolute; overflow: auto; top: 0; right: -17px; bottom: 0; left: 0 }<section>
<aside>
<div id="container-black">
<p id="hello">Hello</p>
<div id="container-nav">
<p id="how">How</p>
<p id="are">are</p>
<p id="you">you</p>
</div>
</div>
</aside>
<main class="ns-outer">
<div class="ns-inner">
<h1>First heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Second heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien,
in ultricies nibh maximus quis. Nulla facilisi.</article>
<h1>Third heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Fourth heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
</div>
</main>
</section>
<section>
<aside>
<div id="container-black">
<p id="hello">Hello</p>
<div id="container-nav">
<p id="how">How</p>
<p id="are">are</p>
<p id="you">you</p>
</div>
</div>
</aside>
<main class="ns-outer">
<div class="ns-inner">
<h1>First heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Second heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien,
in ultricies nibh maximus quis. Nulla facilisi.</article>
<h1>Third heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Fourth heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
</div>
</main>
</section>
<section>
<aside>
<div id="container-black">
<p id="hello">Hello</p>
<div id="container-nav">
<p id="how">How</p>
<p id="are">are</p>
<p id="you">you</p>
</div>
</div>
</aside>
<main class="ns-outer">
<div class="ns-inner">
<h1>First heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Second heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien,
in ultricies nibh maximus quis. Nulla facilisi.</article>
<h1>Third heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Fourth heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
</div>
</main>
</section>
<section>
<aside>
<div id="container-black">
<p id="hello">Hello</p>
<div id="container-nav">
<p id="how">How</p>
<p id="are">are</p>
<p id="you">you</p>
</div>
</div>
</aside>
<main class="ns-outer">
<div class="ns-inner">
<h1>First heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Second heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien,
in ultricies nibh maximus quis. Nulla facilisi.</article>
<h1>Third heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
<h1>Fourth heading</h1>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec
lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.</article>
</div>
</main>
</section>