防止div的位置随着高度的增加而改变

Question

代码笔

form{
min-height: 50vh;
transition: all 0.7s linear;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border: 0 2px 0 0 solid black;
width: 20rem;
padding: 10%;
margin:auto;
flex-wrap: wrap;
position: relative;
background-color: #e9ac67;
position: relative;
}
input{
height: 2rem;
border: 2px solid black;
}
label{
text-transform: capitalize;
}
.sug-city{
list-style: none;
font-size: 0.5rem;
}
ul{
list-style: none;
}
li{
border: black 2px solid;
margin:0
}

每当出现建议列表时，高度都会增加(这是意料之中的)，但表单的位置也会发生变化。我希望高度垂直向下而不是向上增长。想想谷歌的搜索栏是如何工作的。这就是我想要的最终结果。

Answer 1

您将列表元素放在同一个容器中，因此扩展列表也会扩展所有内容。

你可以把你的列表元素放在外面和/或给它一个绝对的位置。可以在这里找到最小的更改：代码笔

基本上，我将inputfield包装在相对定位的包装器中，以保持该位置；然后我将ul更改为CCD_ 1。

Answer 2

试试这个

---

ul {
max-height: 250px;
overflow-y: scroll;
}

Answer 3

这种行为是因为你身体的display:flex和你应用了justify-content:space-evenly。自动调整元素之间的可用空间。当建议列表出现时，它会增加选择元素的大小，并在屏幕上占据更多空间，最终屏幕会向上移动。

像这样修改你的CSS，这将解决你的问题。

body {
display: flex;
flex-direction: column;
align-items: center;
position: relative; //So you can specify childrens' absolute position
min-height: 100vh;font-family: 'Urbanist', sans-serif;
text-transform: uppercase;
font-size: 1.3rem;
background-image: linear-gradient(to left top, #051937, #4d295a, #983461, #d2524d, #e98c27);
}
form {
min-height: 50vh;
transition: all 0.7s linear;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border: 0 2px 0 0 solid black;
width: 20rem;
padding: 10%;
margin:auto;
flex-wrap: wrap;
background-color: #e9ac67;
}
header {
margin-top: 50px;
}
main {
position: relative;
top: 50px;
}

Answer 4

最好使用另一个Units来声明高度。"vh"；单元可能会产生一些问题，特别是在移动设备中。

and also use 
ul{
overflow-y: scroll;
}