Question

当文档宽度大于760px时，我有一个高度为60px的标题。所以，身体显示在标题下方并没有问题，但是当宽度变小时，它的高度为两行（120px），因此身体部分隐藏在顶部。

我该如何解决这个问题？

以下是我使用的代码：

.main_header {
    width:100%;
    height:auto !important;
    background-color:#F2F2F2;
    border-bottom:1px solid #CCC;
    position:fixed;
    top:0px;
    z-index:100;
}
.main_body {
    margin:70px auto;
}

注意：页面是响应式的。

Answer 1

您可以首先将<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> 1 <div id="root" /> </body>的边距设置为120px，这将适用于所有窗口大小。然后，您可以使用媒体查询覆盖特定宽度的边距。注意：使用CSS速记时，.main-body顶部和底部边距将受到影响。

main-body

媒体查询文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

修复了高度可变的标题

1 个答案: