问题出在“container main”div上,它有溢出-y。当 <form>
高度增加并且溢出开始在“容器 div”上工作时,不可能看到整个表单并且顶部被隐藏
我不认为这是正常行为,我在这个问题上已经有几个小时了,只是无法按照我想要的方式解决它(让表单以“container main”flexbox 为中心)
.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;
}
<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 :(得分:0)
我认为你的 CSS 代码有问题的部分是这样的:
.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
(因为表单内容可以' t 被挤压),但 <form>
的顶部将与 .main.container
的顶部对齐。答案 1 :(得分:0)
这是关于'display: flex;' flexbox 不仅仅是一个属性,它是一个完整的模块。如果您有兴趣阅读有关 flexbox 的文章:guide to use flex-box。
删除显示时:flex;在您的主容器中,它将解决您的问题。
.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;
}
<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>