Question

所以我们正在为客户设计一个网站，我们正在将我们的设计构建成一个wordpress框架工作，问题是我们需要网站在台式机和笔记本电脑的屏幕上完全解开。

内容溢出的div内容（主要内容）具有垂直滚动但通常整个屏幕不应该是滚动。由于我们手动更改几乎所有不同屏幕分辨率的边距和填充，因此我们很难将其设置为不同的屏幕尺寸。

有没有更好的方法可以在CSS或jquery中实现？

您可以查看我们在http://demo.unboundcodes.com/khandelwal/

创建的演示

这适用于一些流行的屏幕尺寸，但我们仍然无法取得成功，因为页面上的标题和主要内容之间仍然存在一些间距问题。

Answer 1

使您的网站针对不同屏幕尺寸和平台做出响应的最佳解决方案是使用css媒体查询。您可以分别指定笔记本电脑屏幕，台式机，手机和平板电脑的行为。在那里，您可以将以下css属性用于笔记本电脑和台式机

overflow-x: hidden //if you want to stop x-axis scrolling
overflow-y: hidden //if you want to stop y-axis scrolling
overflow: hidden  //if you want to stop x and y-axis scrolling

详细说明请看一下： CSS Media Queries

Answer 2

您可以将CSS属性overflow:hidden;用于正文以防止滚动。或者，您可以使用width:100%; height:100%;

确保身体尺寸

Answer 3

一个快速，非优雅但工作独立的解决方案，内联CSS并且没有jQuery要求。它也适用于IE9。尝试下面的代码可能会有所帮助

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script> </body>

如何在台式机和笔记本电脑的屏幕分辨率上禁用网站上的垂直滚动？

3 个答案: