Question

我有一个相当简单的布局，使用固定大小的标题和垂直居中的div占用了剩余的空间。

<div class="header">
    <div class="header_container">
        This is some header content
    </div>

    <div class="frame_container">
        <div class="container">
            <div class="frame">
                This is the frame content
                <br />
                It stretches across three lines
                <br />
                <img src="http://dummyimage.com/100x100/000/fff">
                <br />
                And could include a link
            </div>
        </div>
    </div>

body{padding:0;margin:0;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-color:red;}

.header{height:100px !important;background:black;width:100%;padding-top:0 !important;}
.header_container{padding-top:40px;max-width:1000px;margin:auto;color:white;text-align:center;}

.frame_container{position:absolute;margin-top:50px;top:50%;left:50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}

.frame{color:black;background:green;padding:20px;text-align:center;}

所有看起来都很好，直到您降低屏幕的高度，例如iPhone上的横向模式。然后帧开始与标题重叠。

我认为这取决于绝对定位，但无法看到如何修复它。我希望滚动条显示而不是框架重叠。

有人能指出我正确的方向吗？

Answer 1

这看起来像一个选项吗？

＆＃13;

html, body{
  min-height: 100vh;
  padding:0;
  margin:0;
  }
body{
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-color:red;
  display: flex;
  flex-direction: column;
}
.header{
  height:100px;background:black;width:100%;padding-top:0;
}  
.header_container{
  padding-top:40px;
  max-width:1000px;
  margin:auto;
  color:white;
  text-align:center;
}
.container{
  flex: 1;
  display: flex;
  align-items: center;
}
.frame_container {
  width: 50%;
  margin: 0 auto;
}

.frame{
  color:black;
  background:green;
  padding:20px;
  text-align:center;
}

＆＃13;

<div class="header">
  <div class="header_container">
    This is some header content
  </div>
</div>
<div class="container">
  <div class="frame_container">
    <div class="frame">
      This is the frame content
      <br />
      It stretches across three lines
      <br />
      <img src="http://dummyimage.com/100x100/000/fff">
      <br />
      And could include a link
    </div>
  </div>
</div>

＆＃13;

Answer 2

我会使用包含max-height条件的媒体查询，将该容器div的absolute定位更改为relative以用于较小的屏幕（也可能调整其他一些细节）。

垂直居中的HTML布局div在较小的高度重叠标题

2 个答案: