在调整大小时折叠我的页面

我创建了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%;}

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

UPDATE ] 2

来源

2015-11-05 Sadiq Jaffer

在你页面的CSS，

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

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

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

更新

你.header-content风格是有-webkit-transform:TranslateY()和transform:translateY()。

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

页眉内容是有填充值，使你的主要内容，以一些像素向右移动。这导致溢出。请删除这一点。

来源

2015-11-05 09:48:57

我删除了这部分，我试图限制横向模式的用户只能用于平板电脑。我需要防止他们有一个更小的屏幕，因为在某些情况下，我的内容会离开屏幕。 –

你的页面有一些额外的溢出空间。如果你可以控制它，你将能够在没有任何问题的情况下加载横向页面。 –

你可以指定确切的地方吗？赞赏。 –

@media (max-width:1500px) { 


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

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

}

变化最小宽度最大宽度尝试thiss ...

来源

2015-11-05 09:32:58

仍然没有改变。 –

可能是宽度problm ..try到768px .... –

我的需要是防止用户调整更多，所以他们不会得到小页面，这个宽度为我的媒体查询。 –

在调整大小时折叠我的页面

回答

相关问题