我需要在某些情况下显示一个div元素的全高，而不是一个可滚动的页面，但在div内部，必须有一些可滚动的子元素。我画了场景并创建了一个jsfiddle。如果有人能在这里帮助我，我会很高兴。
场景的要求是这样的：

.main应该是全高/屏幕。
.main应该有position:fixed; top:0; bottom:0; left: 0, right: 0;样式。
有一些可滚动的区域，其他的应该保持不变。
.main__inner__content__description_1应该可以滚动。
.main__inner__content__description_2应该是可滚动的。.main__inner__content__second或
.main__inner__content__description-2将是一个固定的高度。
.main__inner__content__first或.main__inner__content__description-1应该自动获取剩余的高度，所以如果我更改.main__inner__content__second的高度，那么.main__inner__content__first应该相应地更新其高度。
.main__footer在某些情况下可能不存在，因此其余的应该扩展。

x1c 0d1x的数据
https://jsfiddle.net/yqdz9uw3/

<div class="main">
      <div class="main__header"></div>
      <div class="main__inner">
        <div class="main__inner__header">HEADER</div>
        <div class="main__inner__content">
          <div class="main__inner__content__first">
            <div class="main__inner__content__title-1">Area 1</div>
            <div class="main__inner__content__description-1">
              Reprehenderit voluptate proident incididunt exercitation
              voluptate. Sint ad ad tempor consectetur proident exercitation
              esse consectetur in voluptate veniam dolor. Aute officia aliquip
              irure non quis culpa ut veniam ut. Anim pariatur aliqua cupidatat
              nulla aute pariatur. Dolore pariatur anim commodo aute do laboris
              aute nulla et irure sint duis. Magna exercitation ea mollit eu
              aliqua id in. Dolor ex in irure veniam. Fugiat reprehenderit
              excepteur ullamco dolore do labore labore sit. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum. Anim occaecat consectetur enim labore
              commodo minim do voluptate esse culpa ut officia consequat et
              exercitation. Pariatur in dolore labore non. Exercitation commodo
              dolor id culpa fugiat dolore labore. Ullamco exercitation esse et
              officia ullamco est deserunt sunt voluptate Lorem exercitation
              excepteur. Cupidatat ullamco exercitation aute commodo sunt anim
              laborum do consequat mollit dolor dolore. In eiusmod cillum enim
              do amet et laboris nulla mollit. Qui dolore veniam non excepteur
              reprehenderit minim incididunt amet tempor aute magna et occaecat.
              Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit
              ea enim dolor velit. Officia quis commodo anim aliqua culpa.
              Adipisicing in eu ipsum ad culpa cupidatat anim eiusmod sint ad.
              Cillum labore voluptate sunt anim nulla eiusmod laboris aute
              tempor aute. Ipsum excepteur ex sunt cupidatat labore proident
              nostrud ex minim qui veniam non. Velit labore cillum cupidatat ea
              mollit culpa dolore ex sunt. Amet ullamco mollit deserunt. Dolor
              eu quis excepteur nostrud in esse. Pariatur in cupidatat
              exercitation veniam consectetur sint incididunt ut qui magna nisi
              occaecat. In cillum sunt mollit. Occaecat enim veniam duis enim
              nisi. Voluptate in culpa magna exercitation. Non sit magna
              voluptate incididunt consectetur ex amet consectetur excepteur
              aute consequat enim sunt amet fugiat. Laboris eu pariatur nulla ut
              aute aliquip laboris duis. Officia commodo Lorem commodo fugiat
              fugiat velit non ut consequat velit occaecat. Aute fugiat quis
              aute dolore pariatur mollit occaecat in do commodo fugiat.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmod laboris ullamco fugiat ea fugiat
              in mollit deserunt aliquip esse ullamco esse sint. Adipisicing
              pariatur adipisicing minim et reprehenderit labore amet. Culpa
              excepteur et esse elit qui aliquip enim eu voluptate ut. Laborum
              esse tempor consectetur mollit exercitation non ad adipisicing
              pariatur. Sit id ut eu dolore anim ullamco eu. Aliquip dolore
              Lorem sint velit voluptate. Anim excepteur consequat magna officia
              minim anim Lorem magna culpa tempor aliqua. Quis fugiat nulla
              ipsum. Sint pariatur aliquip proident labore est pariatur aliquip
              in. Veniam laborum do consectetur nostrud nostrud laborum. Quis
              reprehenderit esse et ex amet. Anim amet ex culpa ullamco sunt.
              Aliquip et consequat commodo officia consequat adipisicing eiusmod
              quis aliquip pariatur incididunt dolore. Amet dolore ipsum
              proident laborum id. Nisi sint aute voluptate do in et ut. Dolor
              laboris sunt incididunt et sint ullamco nostrud commodo est magna
              tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
              commodo velit nisi sint incididunt amet. Reprehenderit voluptate
              proident incididunt exercitation voluptate. Sint ad ad tempor
              consectetur proident exercitation esse consectetur in voluptate
              veniam dolor. Aute officia aliquip irure non quis culpa ut veniam
              ut. Anim pariatur aliqua cupidatat nulla aute pariatur. Dolore
              pariatur anim commodo aute do laboris aute nulla et irure sint
              duis. Magna exercitation ea mollit eu aliqua id in. Dolor ex in
              irure veniam. Fugiat reprehenderit excepteur ullamco dolore do
              labore labore sit. Ut nulla officia in reprehenderit irure elit
              sint ex eiusmod tempor eiusmod culpa laborum cillum et. Pariatur
              nostrud dolor tempor ad incididunt incididunt eiusmod officia
              mollit amet cillum aliqua. Irure ea quis ad. Sit cupidatat veniam
              aliqua non elit ipsum magna dolore. Esse ea fugiat ea elit nulla
              reprehenderit incididunt ullamco dolor mollit eiusmod laboris non.
              Dolor consequat Lorem eiusmod. Enim culpa reprehenderit veniam
              culpa eiusmod nostrud reprehenderit dolore tempor ipsum aliquip
              labore ut fugiat consequat. Nostrud excepteur adipisicing
              consequat. Quis voluptate labore dolore officia eiusmod est elit
              aliqua laborum. Incididunt officia qui consequat incididunt
              laborum proident nisi sunt sint aliqua irure aliqua amet.
              Exercitation incididunt nulla anim qui. Veniam occaecat qui tempor
              et quis culpa aliqua aliquip laboris voluptate tempor quis ipsum.
              Cillum labore voluptate sunt anim nulla eiusmod laboris aute
              tempor aute. Ipsum excepteur ex sunt cupidatat labore proident
              nostrud ex minim qui veniam non. Velit labore cillum cupidatat ea
              mollit culpa dolore ex sunt. Amet ullamco mollit deserunt. Dolor
              eu quis excepteur nostrud in esse. Pariatur in cupidatat
              exercitation veniam consectetur sint incididunt ut qui magna nisi
              occaecat. In cillum sunt mollit. Occaecat enim veniam duis enim
              nisi. Voluptate in culpa magna exercitation. Non sit magna
              voluptate incididunt consectetur ex amet consectetur excepteur
              aute consequat enim sunt amet fugiat. Laboris eu pariatur nulla ut
              aute aliquip laboris duis. Officia commodo Lorem commodo fugiat
              fugiat velit non ut consequat velit occaecat. Aute fugiat quis
              aute dolore pariatur mollit occaecat in do commodo fugiat.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmod laboris ullamco fugiat ea fugiat
              in mollit deserunt aliquip esse ullamco esse sint. Adipisicing
              pariatur adipisicing minim et reprehenderit labore amet. Culpa
              excepteur et esse elit qui aliquip enim eu voluptate ut. Laborum
              esse tempor consectetur mollit exercitation non ad adipisicing
              pariatur. Sit id ut eu dolore anim ullamco eu. Aliquip dolore
              Lorem sint velit voluptate. Anim excepteur consequat magna officia
              minim anim Lorem magna culpa tempor aliqua. Quis fugiat nulla
              ipsum. Sint pariatur aliquip proident labore est pariatur aliquip
              in. Veniam laborum do consectetur nostrud nostrud laborum. Quis
              reprehenderit esse et ex amet. Anim amet ex culpa ullamco sunt.
              Aliquip et consequat commodo officia consequat adipisicing eiusmod
              quis aliquip pariatur incididunt dolore. Amet dolore ipsum
              proident laborum id. Nisi sint aute voluptate do in et ut. Dolor
              laboris sunt incididunt et sint ullamco nostrud commodo est magna
              tempor et laborum consequat. Elit ex nostrud deserunt qui dolor
              commodo velit nisi sint incididunt amet. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum.
            </div>
          </div>
          <div class="main__inner__content__second">
            <div class="main__inner__content__title-2">Area 2</div>
            <div class="main__inner__content__description-2">
              Reprehenderit voluptate proident incididunt exercitation
              voluptate. Sint ad ad tempor consectetur proident exercitation
              esse consectetur in voluptate veniam dolor. Aute officia aliquip
              irure non quis culpa ut veniam ut. Anim pariatur aliqua cupidatat
              nulla aute pariatur. Dolore pariatur anim commodo aute do laboris
              aute nulla et irure sint duis. Magna exercitation ea mollit eu
              aliqua id in. Dolor ex in irure veniam. Fugiat reprehenderit
              excepteur ullamco dolore do labore labore sit. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
              labore dolore officia eiusmod est elit aliqua laborum. Incididunt
              officia qui consequat incididunt laborum proident nisi sunt sint
              aliqua irure aliqua amet. Exercitation incididunt nulla anim qui.
              Veniam occaecat qui tempor et quis culpa aliqua aliquip laboris
              voluptate tempor quis ipsum. Anim occaecat consectetur enim labore
              commodo minim do voluptate esse culpa ut officia consequat et
              exercitation. Pariatur in dolore labore non. Exercitation commodo
              dolor id culpa fugiat dolore labore. Ullamco exercitation esse et
              officia ullamco est deserunt sunt voluptate Lorem exercitation
              excepteur. Cupidatat ullamco exercitation aute commodo sunt anim
              laborum do consequat mollit dolor dolore. In eiusmod cillum enim
              do amet et laboris nulla mollit. Qui dolore veniam non excepteur
              reprehenderit minim incididunt amet tempor aute magna et occaecat.
              Nulla incididunt do duis. Pariatur dolore amet culpa cillum elit
              ea enim dolor velit. Officia quis commodo anim aliqua culpa.
              Adipisicing in eu ipsum ad culpa cupidatat anim eiusmod sint ad.
              Consectetur non occaecat labore consequat commodo pariatur id
              ipsum cillum. Reprehenderit nulla eiusmod culpa dolore enim veniam
              tempor. Cupidatat nulla eiusmoem magna culpa tempor aliqua. Quis
              fugiat nulla ipsum. Sint pariatur aliquip proident labore est
              pariatur aliquip in. Veniam laborum do consectetur nostrud nostrud
              laborum. Quis reprehenderit esse et ex amet. Anim amet ex culpa
              ullamco sunt. Aliquip et consequat commodo officia consequat
              adipisicing eiusmod quis aliquip pariatur incididunt dolore. Amet
              dolore ipsum proident laborum id. Nisi sint aute voluptate do in
              et ut. Dolor laboris sunt incididunt et sint ullamco nostrud
              commodo est magna tempor et laborum consequat. Elit ex nostrud
              deserunt qui dolor commodo velit nisi sint incididunt amet.
            </div>
          </div>
        </div>
      </div>
      <div class="main__footer">
        Footer
        <button>test</button>
      </div>

个字符
我试过溢出：自动或隐藏在某些地方，以及许多其他东西。

2条答案

按热度按时间

vhipe2zx1#

您可能希望添加更多的垂直Flex布局，即在.main__inner上，.main__inner__content__first和.main__inner__content__second。这是为了使这些元素的子元素可以适当地调整它们的高度并引起溢出。我们还在某些地方应用min-height: 0来覆盖由垂直灵活布局引起的默认min-height: min-content。这是为了使这些元素可以小于它们的计算值。min-content，从而允许溢出并因此滚动。

.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: silver;
  overflow: auto;
}

.main__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
}

.main__inner__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  max-height: 100%;
  min-height: 0;
}

.main__inner__content__first {
  display: flex;
  flex-direction: column;
  background: pink;
  flex-grow: 1;
  min-height: 0;
}

.main__inner__content__second {
  display: flex;
  flex-direction: column;
  height: 200px;
  background: MediumSeaGreen;
  flex-shrink: 0;
}

.main__inner__content__description-1,
.main__inner__content__description-2 {
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}

.main__inner__content__description-1 {
  background: lightblue;
}

.main__inner__content__description-2 {
  background: gold;
}

.main__footer {
  flex-shrink: 0;
}

个字符

赞(0）回复(0）举报 5个月前

ht4b089n2#

应用.main { display:grid; grid-template-rows:auto auto 1fr auto 100px auto; }：

.main {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto 100px auto;
  text-align: center;
}

.header,
.footer {
  background: gray;
}

.title-pink {
  background: pink;
}

.scrollable {
  overflow-y: auto;
}

.scrollable-blue {
  background-color: lightblue;
}

.title-green {
  background-color: green;
}

.scrollable-orange {
  background-color: orange;
}

css 具有可滚动子级和固定子级的全高度div

2条答案

相关问题

热门标签

最新问答