如何将get-history网格容器绝对定位到搜索框下方并实现响应式？

问题分析 #

你当前的问题在于search-container用min-height:80vh实现了整体居中，但这个容器的高度会占据大部分视口，导致外部的get-history被挤到视口外；用绝对定位又没法自适应不同屏幕下搜索框的位置，没法做到响应式对齐。

解决方案 #

调整HTML结构，把搜索框和历史容器放到同一个父容器里，利用Flex垂直布局实现两者的关联排列，同时保持整体居中效果。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Starter</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> 
    <style>
      body{
        font-family: montserrat;
      }
      #search-container{
        display: flex;
        flex-direction: column; /* 改为垂直排列 */
        justify-content: center;
        align-items: center;
        min-height: 80vh;
      }
      #search-box{
        border-style: solid;
        border-radius: 4px;
        height: 30px;
        font-weight: 450;
        font-size: 16px;
        width: 80%; /* 默认宽度，对应移动端 */
      }
      #get-history{
        display: grid;
        border: 1px solid rgb(0,0,0,0.1);
        width: 80%; /* 和搜索框宽度一致 */
        margin-top: 10px; /* 和搜索框拉开间距 */
      }
      @media (prefers-color-scheme: dark){
        body{
          background-color: #2b2a33;
        }
        #search-box{
          background-color: #42414d;
          color: white;
          border-color: rgb(255,0,0,0.8);
        }
        #get-history{
          background-color: #42414d;
          color: white;
          border-color: rgb(255,0,0,0.8);
        }
      }
      @media (prefers-color-scheme: light){
        #search-box{
          color: #42414d;
        }
      }
@media (min-width:320px)  { /* phone*/
#search-box{
  height: 45px;
}
 }
@media (min-width:1281px) { /* desktops*/ 
  #search-box, #get-history{
    width: 60%; /* 桌面端同步调整宽度 */
    height: 52px;
  }
}
    </style>
</head>
<body >
  <div id="search-container">   
   <input id="search-box" type="text" placeholder="search anything.">
   <div id="get-history">
     <div>exa</div>
   </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

关键改动说明 #

• 结构调整：把get-history移入search-container内，让两者成为同一父容器的子元素，布局上形成关联。
• Flex方向修改：给search-container添加flex-direction: column，让内部元素垂直排列，历史容器自然会在搜索框下方。
• 宽度同步：给search-box和get-history设置统一的宽度（移动端80%，桌面端60%），保证两者对齐，替代原来的flex属性更直观控制宽度。
• 移除绝对定位：删掉get-history的position:absolute，改用margin-top控制和搜索框的间距，实现响应式跟随。
• 深色模式适配：给get-history也添加深色模式下的样式，保持整体风格统一。

这样修改后，不管屏幕大小，历史容器都会精准定位在搜索框下方，同时整个搜索区域依然保持在视口中居中的效果。

内容的提问来源于stack exchange，提问作者Cccccccc