將CSS半固定/半滾動布局設置為100％高度

Question

我的版面中有彼此相對的部分，其中有四個。 它們包含一個容器和一個主容器。 一側保持固定在屏幕上，無論屏幕在哪一側。 我要更改它，以便一旁占據屏幕高度的100％。 現在，當我嘗試將其高度顯式更改為100％或vh時，它破壞了布局。 就像現在一樣，主容器將是其包含的內容的高度。 （一旁保持固定，直到main滾動到結束為止。這時，整個屏幕將滾動到下一部分，現在切換為main和aside切換。

這就是布局應具有的功能…… 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;
}

另外，如果有任何方法可以擺脫內部滾動。 布局相同，只有一個滾動條。

Answer 1

改寫

更改密碼筆后，我的答案需要重寫，因為基本上規則已更改。

CSS

• 為了更好地了解您的CSS，我上下移動了一些內容以獲得“邏輯流程”。
• 將規則放在同一行以壓縮代碼段視圖
• 在我進行更改的代碼中添加了注釋
• 通過在20rem上創建柔性包裝， 以使顯示寬度小於40rem ，從而增加了移動設備/桌面的響應 速度

HTML

• 將<h1>和<articles放入其各自的容器<div>
• 上面的修改用於通過隱藏.ns-outer類的main的滾動條並啟用容器<div>滾動條來創建隱藏的滾動條效果，但使用.ns-inner類的視圖隱藏起來

鏈接

Codepen“ stackoverflow 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>