Question

我创建了this page并且它工作正常，我在调整大小时遇到问题，当我调整浏览器大小时我的页面被裁剪并且无法滚动到达它。
这是我的HTML代码

  <body id="page-top">
    <style type="text/css">

  @media (min-width:1500px) { 


   .new_bg {
    background-image: url(img/bg2000.png);
    background-size: cover;

    background-repeat: no-repeat;
    min-height: 50%;
  }

}

在我的CSS代码中：

html,body {
width: 100%;
height: 100%;}

道歉如果我没有抓到所需的代码部分，你可以参考页面试试，谢谢。

更新的 ] 2

Answer 1

  @media (max-width:1500px) { 


   .new_bg {
    background-image: url(img/bg2000.png);
    background-size: cover;

    background-repeat: no-repeat;
    min-height: 50%;
  }

}

将最小宽度更改为最大宽度试试这个......

Answer 2

在你的页面CSS中，

@media only screen and (orientation:portrait){
     header{
         display:none;
     }
 }

这会导致您的页面在调整窗口大小时不可见。当您开始调整窗口大小时，在某个宽度和高度处，方向将变为纵向，整个页面设置为display:none。

根据您的问题，我觉得，您不需要那种风格，因为您的查询就像您无法在调整大小时找到内容。

<强> 更新

您的.header-content样式有-webkit-transform:TranslateY()和transform:translateY()。

这使您的内容向上移动并使您的页面在浏览器视图之外的位置开始。请删除这两个。

您的标题内容包含填充值，使您的主要内容向右移动一些像素。这导致溢出。请删除它。

调整大小时折叠我的页面

2 个答案: