Question

我承认......我正在努力解决这个问题......我正在尝试制作一个包含4个div的响应式页面。

所有div都是宽度：100％标题div：我希望文本显示在div的底部（这将是一个口号），因此它看起来更接近图像。图像div：我希望图像在div中垂直和水平居中。按钮div：我想要div顶部的按钮（登录），使其看起来更接近图像。页脚div：我希望无论如何都处于页面的绝对底部。

+-----------+
|           |
|           |
|  Header   |
+-----------+
|           |
|   Image   |
| (75%x75%) |
|           |
+-----------+
|  Button   |
|  <a link  |
|           |
+-----------+
+-----------+
|  Footer   |
+-----------+

在iPad上我的功能似乎有效，但当我将它加载到屏幕较小的设备（Android或iPhone 4/5）上时，一切都崩溃了......

我的HTML：

<div id="welcomePage">
    <div class="welcome">
      <div class="welcome_header">
        <h1 class="welcome">Welcome Slogan</h1>
      </div>
      <div class="welcome_image">
        <img src="logo.svg">
      </div>
      <div class="welcome_button">        
            <input type="button" value="Get Started Now!">
            <p>Already have an account? <a href="login.html">Login here</a></p>
      </div>
      <div class="welcome_footer">
         <h3>&copy; 2018 BlahBlah, Inc.</h3>
      </div>
    </div>      
</div>

我的CSS：

.welcome {color: #5e87b0; height:100%; }
.welcome_header {width: 100%; height: 25%; min-height: 25%; display: table-header; vertical-align: text-bottom;}
.welcome_header h1{font-size:6vh;}
.welcome_image {width: 100%; margin-left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }
.welcome_image img {border: 0; width: 75%; height: 75%;}
.welcome_button {width: 100%; height: 20%; position: absolute; clear: both; position:absolute; bottom:5%; left:0;}
.welcome_button h3 {transform: translateY(100%); bottom:0; text-align: center;}
.welcome_footer {width: 100%; height: 5%; position: fixed; clear: both; bottom: 10px; left:0;}
.welcome_footer h3{font-size:1vh;}

我缺少什么（除了现代css技能;-)）？

Answer 1

您可以使用flex

轻松堆叠它们

#welcomePage {
  display: flex;
  flex-direction: column;
}

#welcomePage div {
  flex: 1 1 auto;
}

4个垂直堆叠的响应div

1 个答案: