Question

关于身高，我的设计有问题。在响应宽度上我没有问题但是当我垂直调整大小时，我的主要内容会向上推重叠我的标题。如何修正页面的高度？这是我的风格：

#my-header {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    z-index: 30;
}

然后

.my-content { /** no styles applied yet **/}

我尝试在我的内容中添加margin-top，但它增加了标题和我的内容之间的余量。

我希望你能帮助我。

Answer 1

我的布局问题是横幅本身。

.hero-banner {
    background: url('my-banner-image.jpg') 50% no-repeat;
    background-size: cover;
    height: 100vh;
    text-align: center;
    font-family: 'proxima-soft', sans-serif;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    min-height: 1000px; /** this fixed my issue **/
}

我忘了提到重叠的那个实际上是我的文字里面的文字。

如何修改页面高度的大小，甚至在响应中垂直调整我的浏览器大小？

1 个答案: