响应设计-调整窗口大小时Div消失

Question

仅当宽度值小于800px时才使两个div元素（.left和.right）垂直显示。但是，当我尝试这样做时，div .left消失了。我从代码中删除了一些内容以使其简短。

有人对为什么发生这种情况以及如何解决它有想法吗？

这是我的代码：

* {
            box-sizing: border-box;
        }
        
        body {
            color: white;
        }
        
        .split {
            height: 100%;
            width: 50%;
            position: fixed;
            z-index: 1;
            top: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }
        
        .left {
            left: 0;
            background-color: #282C34;
        }
        
        .right {
            right: 0;
            background-color: #616161;
        }
        
        .centered {
            position: absolute;
            width: 100;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .container {
            position: relative;
            border-style: solid;
            border-color: #92a8d1;
            background-color: #92a8d1;
        }
        
        @media screen and (max-width:800px) {
            .left,
            .right {
                width: 100%;
                /* The width is 100%, when the viewport is 800px or smaller */
            }
        }

<div class="split left">
        <div class="centered">
            <center>
                <div class="container">
                    <div class="middle">
                        <div class="text">
                            <a></a>
                        </div>
                    </div>
                    <div class="information">
                        <h2>asd</h2>
                    </div>
                </div>
            </center>
        </div>
    </div>

    <div class="split right">
        <div class="centered">
            <center>
                <div class="container">
                    <div class="middle">
                        <div class="text">
                            <a></a>
                        </div>
                    </div>
                    <div class="information">
                        <h2>fgh</h2>
                    </div>
                </div>
            </center>
        </div>
    </div>

感谢您的帮助！

Answer 1

* {
            box-sizing: border-box;
        }
        
        body {
            color: white;
            margin: 0;
        }
        
        .split {
            height: 100%;
            width: 50%;
            position: fixed;
            z-index: 1;
            top: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }
        
        .left {
            left: 0;
            background-color: #282C34;
        }
        
        .right {
            right: 0;
            background-color: #616161;
        }
        
        .centered {
            position: absolute;
            width: 100;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .container {
            position: relative;
            border-style: solid;
            border-color: #92a8d1;
            background-color: #92a8d1;
        }
        
        @media screen and (max-width:800px) {
            .left,
            .right {
                width: 100%;
                height: 50%;
                /* The width is 100%, when the viewport is 800px or smaller */
            }
            
            .split {
               position: relative;
            }
            
            body {
              height: 100vh;
            }
        }

<div class="split left">
  <div class="centered">
    <center>
      <div class="container">
        <div class="middle">
          <div class="text">
            <a></a>
          </div>
        </div>
        <div class="information">
          <h2>asd</h2>
        </div>
      </div>
    </center>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <center>
      <div class="container">
        <div class="middle">
          <div class="text">
            <a></a>
          </div>
        </div>
        <div class="information">
          <h2>fgh</h2>
        </div>
      </div>
    </center>
  </div>
</div>

Answer 2

嵌套包装div内的两个div，并使用媒体查询和flex属性。喜欢..

HTML：

<div class="wrapper">
    <div class="left">
        ...
    </div>
    <div class="right">
        ...
    </div>
</div>

CSS / SCSS

@media(max-width: 800px) {
    .wrapper {
        display: flex;
        flex-direction: column;
        ...
    }
}