个人中心
gpt4 book ai didi

html - 在 CSS flexbox 的粘性页眉和页脚中仅滚动子标题下的中间内容

转载 作者：行者123 更新时间：2023-11-28 19:20:18 24 4
gpt4 key购买 nike

我是 CSS flexbox 的新手，当我按如下所示响应我的网页时遇到了这个问题。

enter image description here

在这里您可以看到黑色橙色和红色的页 footer 分应该是粘性的。在我下面的代码中，我将它们全部缩小并将 HTML 高度设置为 100vh，将 body 高度设置为 100%。因为给定的预览不应该滚动(粘到窗口大小)而且我只想在这里滚动我们名为 C 的内容。

我将类名 list 的内容设置为 overflow: auto 但它不起作用。我可以在 pio CSS 中做到这一点。但是我想使用 flexbox 那么我该怎么做呢？ HTML 和 CSS 代码如下所示。

body {
  height: 100vh;
}

.parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.arrow {
  height: 50px;
  background: black;
  flex-shrink: 0;
}

.heading {
  height: 50px;
  background: chocolate;
  flex-shrink: 0;
}

.mainContent {
  background: aquamarine;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.footer {
  background: red;
  height: 100px;
  flex-shrink: 0;
}

.box {
  background: wheat;
  flex: 1;
  padding: 10px;
}

.list {
  overflow: auto;
}
<body>
  <div class="parent">
    <div class="arrow">
    </div>
    <div class="heading">
    </div>
    <div class="mainContent">
      <div class="box">
        <div class="subheading">
          <h4>background
          </h4>
        </div>
        <div class="list">
          It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum
          passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Goo
        </div>
      </div>
      <div class="box">
        <div class="subheading">
          <h4>materials</h4>
        </div>
        <div class="list">
          random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from
          a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Goo
        </div>
      </div>
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</body>

最佳答案

第一个解决方案: 网格和显示:内容

我用

定义了一个网格容器(可以是主体) 
height: 100vh;
grid-template-rows: repeat(2, 50px) repeat(2, 50px 1fr) 10px 100px;

我设置了main和盒子( .box )到 display: contents; , 这样网格直接应用到部分内容。
有了这个设置 p.list高度设置为 1fr，我可以设置 overflow-y: scroll;在上面。
我不知道如何在最后一部分设置一些底部填充(因为我删除了它的“框”)所以我添加了一个 10px 行并用 grid-row-end: -1; 定义了页脚位置. (注意:在每个 div 标签后添加一个 10px 的 p，或者在段落的 10px 底部边距是其他选项)。

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  height: 100vh;
  background: wheat;
}

html,
body,
div,
p,main,
.subheading {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: repeat(2, 50px) repeat(2, 50px 1fr) 10px 100px;
}

main.mainContent {
  display: contents;
  background: aquamarine;
}

.arrow {
  background: black;
}

.heading {
  background: chocolate;
}

.footer {
  background: red;
  grid-row-end: -1;
}

section.box {
  display: contents;
  background: wheat; 
}

.subheading {
  width: 100%;
  padding: 0 10px;
  font-size: 20px;
  line-height: 50px;
  background: wheat;
}

.list {
  width: 100%;
  padding: 0 30px;
  overflow-y: scroll;
}
<div class='container'>
        <div class="arrow">
        </div>
        <header class="heading">
        </header>
        <main class="mainContent">
            <section class="box">
                <h4 class="subheading">background
                </h4>
                <p class="list">
                    It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                    Richard
                    McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
                    obscure
                    Latin
                    words, consectetur, from a Lorem Ipsum
                    passage, and going through the cites of the word in classical literature, discovered the undoubtable
                    source.
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of
                    Goo.
                    Lorem Ipsum is simply dummy
                    text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                    text
                    ever
                    since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen
                    book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                    popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                    more
                    recently with desktop publishing software like
                    Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact
                    that
                    a
                    reader will be distracted by the readable content of a page when looking at its layout. The point of
                    using
                    Lorem Ipsum is that it has a more-or-less
                    normal distribution of letters, as opposed to using 'Content here, content here', making it look
                    like
                    readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
                    default
                    model text, and a search for 'lorem
                    ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the
                    years,
                    sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from?
                    Contrary to popular belief, Lorem Ipsum
                    is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making
                    it
                    over
                    2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
                    up
                    one
                    of the more obscure Latin words,
                    consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
                    literature,
                    discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                    Finibus
                    Bonorum et Malorum" (The Extremes of
                    Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular
                    during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                    line
                    in
                    section 1.10.32. The standard chunk
                    of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
                    1.10.33
                    from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
                    accompanied
                    by English versions from the
                    1914 translation by H. Rackham. Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a
                    galley of type and scrambled
                    it to make a type specimen book. It has survived not only five centuries, but also the leap into
                    electronic
                    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
                    Letraset
                    sheets containing Lorem Ipsum
                    passages, and more recently with desktop publishing software like Aldus PageMaker including versions
                    of
                    Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the
                    readable content of a page when looking
                    at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
                    letters,
                    as opposed to using 'Content here, content here', making it look like readable English. Many desktop
                    publishing packages and web page editors
                    now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many
                    web
                    sites
                    still in their infancy. Various versions have evolved over the years, sometimes by accident,
                    sometimes
                    on
                    purpose (injected humour and the
                    like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text.
                    It
                    has
                    roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
                    McClintock, a Latin professor at Hampden-Sydney
                    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum
                    passage,
                    and going through the cites of the word in classical literature, discovered the undoubtable source.
                    Lorem
                    Ipsum comes from sections 1.10.32
                    and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in
                    45
                    BC.
                    This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
                    of
                    Lorem Ipsum, "Lorem ipsum dolor sit
                    amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the
                    1500s is
                    reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et
                    Malorum"
                    by
                    Cicero are also reproduced in their
                    exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
                </p>
            </section>

            <section class="box">
                <h4 class="subheading">materials</h4>
                <p class="list">
                    random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
                    years
                    old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
                    the
                    more
                    obscure Latin words, consectetur, from
                    a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered
                    the
                    undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                    Malorum"
                    (The Extremes of Goo. Lorem Ipsum is
                    simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                    standard
                    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                    make
                    a
                    type specimen book. It has survived
                    not only five centuries, but also the leap into electronic typesetting, remaining essentially
                    unchanged.
                    It
                    was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                    and
                    more
                    recently with desktop publishing
                    software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem
                    Ipsum
                    is
                    not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it
                    over
                    2000 years old. Richard McClintock,
                    a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
                    words,
                    consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
                    opposed to using 'Content here, content here', making it look like readable English. Many desktop
                    publishing
                    packages and web page editors
                    now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many
                    web
                    sites
                    still in their infancy. Various versions have evolved over the years, sometimes by accident,
                    sometimes
                    on
                    purpose (injected humour and the
                    like).There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                    alteration in some form, by injected humour, or randomised words which don't look even slightly
                    believable.
                    If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All
                    the
              tin words, combined with a handful of model sentence structures,
                    to
                    generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
                    repetition, injected humour, or non-characteristic
                  atin words, combined with a handful of model sentence structures,
                    to
                    generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
                    repetition, injected humour, or non-characteristic
                    words etc.
                </p>
            </section>
        </main>
        <footer class="footer">
            footer
        </footer>
    </div>

第二种解决方案(重): 100vh 的分数

如果你不想要你的 body要滚动，您可以将 body 设置为 height: 100vh; (就像你一样)和所有其他带有 height 的盒子100vh 的一小部分(最后总和为 100vh)。如果您想确保您的布局以这种方式工作，请添加 overflow: hidden在你的身上。如果您遗漏了一些位，您的总电量仍然超过 100vh。

它可以通过使用变量和 calc() 来设置高度值有所改善。

我稍微修改了您的代码并删除了 flex 部分，因为我没有使用它们。

    html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  height: 100vh;
}

html,
body,
div,
p,
.subheading {
  margin: 0;
  padding: 0;
}

.arrow {
  position: relative;
  height: 10vh;
  background: black;
}

.heading {
  position: relative;
  height: 10vh;
  background: chocolate;
}

.mainContent {
  position: relative;
  height: 70vh;
  background: aquamarine;
}

.footer {
  position: sticky;
  bottom: 0;
  background: red;
  height: 100px;
  max-height: 10vh;

}

.box {
  position: relative;
  width: 100%;
  height: 35vh;
  background: wheat;
  padding: 1vh;
}

.subheading {
  position: relative;
  height: 5vh;
  line-height: 5vh;
}

.list {
  width: 100%;
  position: relative;
  height: 28vh;
  overflow-y: scroll;
  padding: 0 1vw;
}
<body>
    <div class="arrow">
    </div>
    <header class="heading">
    </header>
    <main class="mainContent">
        <section class="box">
            <h4 class="subheading">background
            </h4>
            <p class="list">
                It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
                McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
                Latin
                words, consectetur, from a Lorem Ipsum
                passage, and going through the cites of the word in classical literature, discovered the undoubtable
                source.
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Goo.
                Lorem Ipsum is simply dummy
                text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                ever
                since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that
                a
                reader will be distracted by the readable content of a page when looking at its layout. The point of
                using
                Lorem Ipsum is that it has a more-or-less
                normal distribution of letters, as opposed to using 'Content here, content here', making it look like
                readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
                default
                model text, and a search for 'lorem
                ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,
                sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from?
                Contrary to popular belief, Lorem Ipsum
                is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it
                over
                2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
                one
                of the more obscure Latin words,
                consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
                literature,
                discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
                Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular
                during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
                in
                section 1.10.32. The standard chunk
                of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
                1.10.33
                from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
                accompanied
                by English versions from the
                1914 translation by H. Rackham. Lorem Ipsum is simply dummy text of the printing and typesetting
                industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled
                it to make a type specimen book. It has survived not only five centuries, but also the leap into
                electronic
                typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
                Letraset
                sheets containing Lorem Ipsum
                passages, and more recently with desktop publishing software like Aldu
                now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                sites
                still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes
            obscure Latin words, consectetur, from a Lorem Ipsum
                passage,
                and going through the cites of the word in classical literature, discovered the undoubtable source.
          
                amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
                reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
                by
                Cicero are also reproduced in their
                exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
            </p>
        </section>

        <section class="box">
            <h4 class="subheading">materials</h4>
            <p class="list">
                random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years
                old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the
                more
                obscure Latin words, consectetur, from
                a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the
                undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                Malorum"
                (The Extremes of Goo. Lorem Ipsum is
                simply dummy text of the printing and typesetting industry. Lorem
                recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum
                is
                not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over
                2000 years old. Richard McClintock,
                a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
                consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
                literature,
                discovered the undoubtable source.
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good
                and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
                during
                the Renaissance. The first line
               
                by Cicero are also reproduced in their exact original form, accompanied by English versions from the
                1914
                translation by H. Rackham.It is a long established fact that a reader will be distracted by the readable
                content of a page when looking at
                its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
                as
                opposed to using 'Content here, content here', making it look like readable English. Many desktop
                publishing
                packages and web page editors
                now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                sites
                still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes
                on
                purpose (injected humour and the
                like).There are many variations of passages of Lorem Ipsum available, but the majority have suffered
              
                first
                true generator on the Internet.
                It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to
            
                 alteration in some form, by injected humour, or randomised words which don't look even slightly
                 believable.
                 If you are going to use a passage of
                 Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All
                 the
                 Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
                 first
                 true generator on the Internet.
                 It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to
                 generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
                 repetition, injected humour, or non-characteristic
                 words etc.
            </p>
        </section>
    </main>
    <footer class="footer">
        footer
    </footer>
</body>

关于html - 在 CSS flexbox 的粘性页眉和页脚中仅滚动子标题下的中间内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57424141/

24 4 0
文章推荐： javascript - ajax 生成的表单，通过 javascript 函数通过 php 插入值——当我通过 id 检查元素时，元素不存在？
文章推荐： Javascript - 在所有函数的输入上以编程方式执行方法
文章推荐： javascript - 在 Dijit ValidationTextBox 上使用 dojox.validate，但不将文本设置为必需
文章推荐： javascript - 是否可以将加法和减法合并为一个函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com