文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >溢出隐藏内容。

问溢出隐藏内容。
EN

Stack Overflow用户
提问于 2021-05-03 07:33:27
回答 2查看 80关注 0票数 0

问题在于“容器主”div，它有溢出-y。当<form>高度增加，溢出开始在“容器div”上工作时，不可能看到整个表单，顶部部分被隐藏

我不认为这是正常的行为，我在这个问题上花了几个小时，只是无法用我想要的方式解决它(通过将表单以“容器主”柔性盒为中心)

​

代码语言：javascript
复制
.form-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  backdrop-filter: brightness(125%) hue-rotate(180deg) blur(10px);
  background-color: rgba(0, 0, 0, .5)
}

body {
  background-image: url(https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}

section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto!important
}

.main.container {
  flex-grow: 3;
  height: auto;
  padding: 0 50px;
  overflow-y: scroll;
  margin: 50px auto 50px auto;
  display: flex;
  align-items: center;
}

form {
  width: 100%;
}

.edit {
  width: 50%;
  display: inline-block
}

.edit .input-file {
  cursor: pointer
}

.edit.middle,
.edit.middle input {
  width: 100%
}

.edit.custom-input {
  width: 100%;
  display: flex
}

.edit.right {
  padding-left: 5px
}

.edit.left {
  padding-right: 5px
}

.clickin {
  margin: 15px 0
}

form>.box:nth-child(n+2) {
  margin-top: 70px
}

.current-templates,
.mob {
  display: none;
  margin-top: 20px;
}

.current-templates .file {
  padding: 10px;
  font-size: 1.2rem
}

.current-templates .file:not(:first-child) {
  margin-top: 20px
}

.current-templates .file,
.current-templates .options {
  display: flex;
  align-items: center
}

.current-templates .options {
  width: 100%;
  justify-content: space-around
}

.current-templates .file span {
  white-space: nowrap
}

.current-templates .options {
  margin-left: 30px;
  list-style: none;
  overflow: auto
}

.current-templates .options li {
  padding: 4px 25px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background-color .2s var(--cubic-bezier)
}

.current-templates .options li:hover {
  background-color: var(--hover-color)
}

.current-templates .options .opt[selected=true] {
  background-color: rgba(18, 238, 102, .466)
}

.btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.btn-wrapper button {
  padding: 10px;
  font-size: 1.1rem;
  cursor: pointer;
  outline: 0;
  border: solid #000 1px;
  width: 200px;
  margin-top: 30px
}

.btn-anim {
  transition: background-color .2s var(--cubic-bezier), color .2s var(--cubic-bezier);
  background-color: var(--input-color)
}

.btn-anim:hover {
  background-color: var(--hover-color) !important;
  color: #fff
}

.btn-anim-blocked:hover {
  background-color: rgba(255, 110, 110, .363)!important;
  color: #fff
}

.fas.fa-question {
  font-size: .8rem;
  margin-left: 15px;
  cursor: pointer;
  padding: 5px;
  position: relative
}

.img {
  position: absolute;
  left: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: visibility .2s var(--cubic-bezier), opacity .2s var(--cubic-bezier), transform .2s var(--cubic-bezier)
}

button.refresh-options i {
  background-color: transparent;
  border: none;
  border-radius: 100%;
  padding: 5px 8px;
  transition: transform 1s var(--cubic-bezier)
}

button.refresh-options {
  background-color: transparent;
  border: none;
  padding: 8px;
  font-size: 1rem;
  cursor: pointer;
  outline: 0;
  display: none
}

.edit .input-file,
.edit input {
  background-color: var(--input-color)
}

button.refresh-options:hover i {
  transform: rotateZ(360deg)
}

.check-box {
  margin: 15px 0 25px 1px;
  display: flex;
  align-items: center
}

.check-box .square {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: solid #fff 1px;
  cursor: pointer
}

.check-box span {
  margin-left: 20px
}

header {
  position: fixed;
  width: 100%;
  background-color: transparent;
}

.container.nav-content {
  padding: 0;
  overflow: auto;
}

.container.nav-content {
  grid-template-columns: auto 1fr;
  justify-content: space-between;
}

ul.nav-opts {
  justify-content: flex-end;
}

.fake-nav {
  height: 74px;
  margin-bottom: 30px;
}
代码语言：javascript
复制
<section>
  <div class="fake-nav"></div>
  <header>
    <nav>
      <div class="container nav-content">
        <div class="brand">
          <img src="" alt="clickin logo">
        </div>
        <ul class="nav-opts">
          <li><a href="/">Home</a></li>
          <li><a href="/posts">Posts</a></li>
          <li><a href="/images">Imagens</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container main">
    <div class="form-background"></div>
    <form>
      <div class="edit-wrapper box">
        <div class="edit left"> <label>Id do board <i class="fas fa-question"> <img class="img" src="" alt="Board Id?"> </i></label> <input name="board_id" type="number" required> </div>
        <div class="edit right"> <label>Nome do Grupo<i class="fas fa-question"> <img class="img" src="" alt="Nome do Grupo?"> </i></label> <input name="group_name" type="text" required> </div>
      </div>
      <div class="edit middle box"> <label>Diretório da pasta para construção da estrutura<i class="fas fa-question"> <img class="img" src="" alt="Diretório desejado?"> </i></label> <input name="desired_path" type="text" required> </div>
      <div class="edit-wrapper box">
        <div class="edit left"> <label>Diretório dos Templates<i class="fas fa-question"> <img class="img" src="" alt="Diretório dos templates?"> </i></label> <input name="templates_path" type="text" required> </div>
        <div class="edit right"> <label>Selecione os templates<i class="fas fa-question"> <img class="img" src=""> </i></label> <label class="input-file btn-anim" for="templates">Templates</label> <input name="templates" disabled id="templates" type="file" accept=".psd" multiple
            required> </div>
      </div>
      <div class="edit-wrapper">
        <div class="check-box" data-selected="false">
          <div class="square"></div>
          <span>Templates estruturados em ordem</span>
        </div>
      </div>
      <div class="edit-wrapper mob">
        <button type="button" class="refresh-options btn-anim"> Recarregar temas por possíveis mudanças <i class="fas fa-redo-alt"></i> </button>
        <center> <img width="100px" class="loader" src="" alt="loading"> </center>
      </div>
      <div class="current-templates" style="display: block;">
        <div class="file" selected_topics="">
          <span class="template-name">Template 1</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
        <div class="file" selected_topics="">
          <span class="template-name">Template 2</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
        <div class="file" selected_topics="">
          <span class="template-name">Template 3</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
      </div>
      <div class="btn-wrapper"> <button class="btn-anim" type="submit">Gerar!</button> </div>
    </form>
  </div>
  <footer>Copyright 2021 © João Webber</footer>
</section>

​

html
css
EN

回答 2

Stack Overflow用户

发布于 2021-05-03 08:07:02

我认为CSS代码的冒犯部分是这样的：

代码语言：javascript
复制
.main.container {
  flex-grow: 3;
  height: auto;
  padding: 0 50px;
  overflow-y: scroll;
  margin: 50px auto 50px auto;
  display: flex;
  align-items: center;
}

margin: 50px auto 50px auto;强制您的main.container被挤在header和footer之间，但是form是包含的，而不是跟随其父级的高度。

以下任一项：

  • 您可以从overflow-y: scroll中删除.main.container以允许<form>增加父级的高度，但不能在.main.container中增加滚动条。
  • 或者设置<form> height: 100%以强制其父级高度，这仍然会导致滚动条出现在.main.container中(因为表单内容无法压缩)，但是<form>的顶部将与.main.container顶部对齐。
票数 0
EN

Stack Overflow用户

发布于 2021-05-03 08:40:39

它是关于“display:flex”的；一个柔性盒不仅仅是一个单一的属性，它是一个完整的模块。如果您有兴趣阅读一篇关于flexbox的文章：使用flex-box指南。

当您删除显示: flex；在您的主容器中，它将解决您的问题。

​

代码语言：javascript
复制
.form-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  backdrop-filter: brightness(125%) hue-rotate(180deg) blur(10px);
  background-color: rgba(0, 0, 0, .5)
}
/*
body {
  background-image: url(https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}*/

section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto!important
}

.container.main {
  flex-grow: 3;
  height: auto;
  padding: 0 50px;
  overflow-y: scroll;
  margin: 50px auto 50px auto;
}

form {
  width: 100%;
}

.edit {
  width: 50%;
  display: inline-block
}

.edit .input-file {
  cursor: pointer
}

.edit.middle,
.edit.middle input {
  width: 100%
}

.edit.custom-input {
  width: 100%;
  display: flex
}

.edit.right {
  padding-left: 5px
}

.edit.left {
  padding-right: 5px
}

.clickin {
  margin: 15px 0
}

form>.box:nth-child(n+2) {
  margin-top: 70px
}

.current-templates,
.mob {
  display: none;
  margin-top: 20px;
}

.current-templates .file {
  padding: 10px;
  font-size: 1.2rem
}

.current-templates .file:not(:first-child) {
  margin-top: 20px
}

.current-templates .file,
.current-templates .options {
  display: flex;
  align-items: center
}

.current-templates .options {
  width: 100%;
  justify-content: space-around
}

.current-templates .file span {
  white-space: nowrap
}

.current-templates .options {
  margin-left: 30px;
  list-style: none;
  overflow: auto
}

.current-templates .options li {
  padding: 4px 25px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background-color .2s var(--cubic-bezier)
}

.current-templates .options li:hover {
  background-color: var(--hover-color)
}

.current-templates .options .opt[selected=true] {
  background-color: rgba(18, 238, 102, .466)
}

.btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.btn-wrapper button {
  padding: 10px;
  font-size: 1.1rem;
  cursor: pointer;
  outline: 0;
  border: solid #000 1px;
  width: 200px;
  margin-top: 30px
}

.btn-anim {
  transition: background-color .2s var(--cubic-bezier), color .2s var(--cubic-bezier);
  background-color: var(--input-color)
}

.btn-anim:hover {
  background-color: var(--hover-color) !important;
  color: #fff
}

.btn-anim-blocked:hover {
  background-color: rgba(255, 110, 110, .363)!important;
  color: #fff
}

.fas.fa-question {
  font-size: .8rem;
  margin-left: 15px;
  cursor: pointer;
  padding: 5px;
  position: relative
}

.img {
  position: absolute;
  left: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: visibility .2s var(--cubic-bezier), opacity .2s var(--cubic-bezier), transform .2s var(--cubic-bezier)
}

button.refresh-options i {
  background-color: transparent;
  border: none;
  border-radius: 100%;
  padding: 5px 8px;
  transition: transform 1s var(--cubic-bezier)
}

button.refresh-options {
  background-color: transparent;
  border: none;
  padding: 8px;
  font-size: 1rem;
  cursor: pointer;
  outline: 0;
  display: none
}

.edit .input-file,
.edit input {
  background-color: var(--input-color)
}

button.refresh-options:hover i {
  transform: rotateZ(360deg)
}

.check-box {
  margin: 15px 0 25px 1px;
  display: flex;
  align-items: center
}

.check-box .square {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: solid #fff 1px;
  cursor: pointer
}

.check-box span {
  margin-left: 20px
}

header {
  position: fixed;
  width: 100%;
  background-color: transparent;
}

.container.nav-content {
  padding: 0;
  overflow: auto;
}

.container.nav-content {
  grid-template-columns: auto 1fr;
  justify-content: space-between;
}

ul.nav-opts {
  justify-content: flex-end;
}

.fake-nav {
  height: 74px;
  margin-bottom: 30px;
}
代码语言：javascript
复制
<section>
  <div class="fake-nav"></div>
  <header>
    <nav>
      <div class="container nav-content">
        <div class="brand">
          <img src="" alt="clickin logo">
        </div>
        <ul class="nav-opts">
          <li><a href="/">Home</a></li>
          <li><a href="/posts">Posts</a></li>
          <li><a href="/images">Imagens</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container main">
    <div class="form-background"></div>
    <form>
      <div class="edit-wrapper box">
        <div class="edit left"> <label>Id do board <i class="fas fa-question"> <img class="img" src="" alt="Board Id?"> </i></label> <input name="board_id" type="number" required> </div>
        <div class="edit right"> <label>Nome do Grupo<i class="fas fa-question"> <img class="img" src="" alt="Nome do Grupo?"> </i></label> <input name="group_name" type="text" required> </div>
      </div>
      <div class="edit middle box"> <label>Diretório da pasta para construção da estrutura<i class="fas fa-question"> <img class="img" src="" alt="Diretório desejado?"> </i></label> <input name="desired_path" type="text" required> </div>
      <div class="edit-wrapper box">
        <div class="edit left"> <label>Diretório dos Templates<i class="fas fa-question"> <img class="img" src="" alt="Diretório dos templates?"> </i></label> <input name="templates_path" type="text" required> </div>
        <div class="edit right"> <label>Selecione os templates<i class="fas fa-question"> <img class="img" src=""> </i></label> <label class="input-file btn-anim" for="templates">Templates</label> <input name="templates" disabled id="templates" type="file" accept=".psd" multiple
            required> </div>
      </div>
      <div class="edit-wrapper">
        <div class="check-box" data-selected="false">
          <div class="square"></div>
          <span>Templates estruturados em ordem</span>
        </div>
      </div>
      <div class="edit-wrapper mob">
        <button type="button" class="refresh-options btn-anim"> Recarregar temas por possíveis mudanças <i class="fas fa-redo-alt"></i> </button>
        <center> <img width="100px" class="loader" src="" alt="loading"> </center>
      </div>
      <div class="current-templates" style="display: block;">
        <div class="file" selected_topics="">
          <span class="template-name">Template 1</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
        <div class="file" selected_topics="">
          <span class="template-name">Template 2</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
        <div class="file" selected_topics="">
          <span class="template-name">Template 3</span>
          <ul class="options">
            <li class="opt" selected="false">1 °</li>
            <li class="opt" selected="false">2 °</li>
            <li class="opt" selected="false">3 °</li>
          </ul>
        </div>
      </div>
      <div class="btn-wrapper"> <button class="btn-anim" type="submit">Gerar!</button> </div>
    </form>
  </div>
  <footer>Copyright 2021 © João Webber</footer>
</section>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67365075

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档