将CSS半固定/半滚动布局设置为100％高度

时间：2017-07-18 23:17:06

标签： html css css3 responsive-design

我的布局包含彼此相反的部分，其中有四个部分。它们包含一个旁边和一个主容器。旁边固定在屏幕上，无论屏幕哪一侧。我想改变它，以便旁边占据屏幕高度的100％。现在，当我尝试将其高度显式更改为100％或vh时，它会破坏布局。主容器将是它包含的内容的高度，就像现在一样。 （旁边保持固定，直到主要滚动到结束。此时整个屏幕滚动到下一部分，现在倒转主要和旁边切换侧。

这就是布局应该像...... 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;
}

另外，如果有任何方法可以摆脱内部滚动。相同的布局，只有一个滚动条。

1 个答案:

答案 0 :(得分：0)

<强> REWRITE

更改了codepen后，我的答案需要重写，因为规则基本上已经改变了。

<强> CSS

  • 为了能够更好地理解你的CSS，我上下移动了一点以获得“逻辑流程”。
  • 将规则放在同一行以压缩代码段视图
  • 在我做出更改的代码中添加了评论
  • 通过在 20rem 上创建展示宽度小于 40rem 的
    • ，为移动/桌面添加响应能力

<强> HTML

  • 将<h1>和<articles放入自己的容器<div>
  • 使用上述修改通过隐藏main的滚动条与类.ns-outer并启用容器<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>

相关问题
最新问题