如何停止水平滚动？

8

Sarfraz有already mentionedoverflow-x，这是一个答案，尽管它的意思（因为它说！）是什么，会一直关闭到现在无法是给用户。这有用例，但主要是打扰有用户无法访问的内容是不希望的。

现在的问题是：为什么你会得到水平滚动？在正常情况下，浏览器将包装内容，以便不需要任何水平滚动。如果用户具有正常的窗口大小，则可以通过具有特定宽度的元素（通过样式信息或具有非可打包内容（如大图像））在设计中引起水平滚动。举例来说，这不会需要水平滚动：

<p>...lots of text here...</p>

...但是这会：

<p style='width: 1200px'>...lots of text here...</p>

...如果用户的浏览器窗口宽度小于1200个像素。

因此，如果让内容不可用不是你想要的打算，我的答案是找到导致滚动和纠正它们的元素。

来源

2010-06-07 05:57:03

6

应用以下样式该元素：

overflow-x:hidden;

，或者它应该是：

overflow:auto; 
overflow-x:hidden;

这将确保垂直滚动是有需要的时候。

来源

2010-06-07 05:32:26 Sarfraz

+0

是的，这可能会奏效。但只有在浏览器中，支持css3 – 2010-06-07 06:05:03

+0

@Oden：嗯？ “溢出”已经存在于CSS 2.1中，请参阅[规范]（http://www.w3.org/TR/CSS2/visufx.html#overflow）。 – 2010-06-07 08:26:44

+1

，但它取决于包含哪些元素。请确保元素的父级具有您感兴趣的最大合适宽度。 – pxl 2010-06-07 08:53:02

-2

如果您使用浏览器查看文件，可以通过将其设置为百分比来设置内容的宽度。

来源

2010-06-07 05:43:03 Kangkan

0

如果我正确理解你的问题，你想阻止你的内容超出浏览器窗口的界限。很多时候，设计人员将其布局宽度设置为960像素，以便在页面上设置固定宽度，这非常适合1024 x 768像素的计算机屏幕。根据以下评论，较小分辨率的计算机会因此而获得滚动条。你会做的东西，如：

<html> 
<head> 
</head> 
<body> 
    <div style="width:960px; margin:0 auto;"> 
    ... The rest of your content goes here ... 
    </div> 
</body> 
</html>

您可以了解更多关于浏览器的宽度在这里：

http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width

如果您发现该内容绵延超过这个幅度，那么里面的一个特定项目页面太宽。自己查看页面以确定它可能是什么，或者为我们的帮助提供堆栈溢出链接。给你举个例子，有这其间上述股利会产生问题：

<table style="width:99999px;"> ... table stuff ... </table>

来源

2010-06-07 06:06:46 Matrym

+0

这实际上*会导致浏览器的滚动条出现，其宽度为小于这个值。 – 2010-06-07 08:57:07

+0

是的，但我认为海报的意图是将页面的大小设置为正常的Web标准。希望960能给他提供背景。 – Matrym 2010-06-07 09:00:20

0

如果你想在每一个浏览器使用这个，你不应该没有宽度增加的元素，然后它变得没有水平溢出，在每个浏览器中。

来源

2010-06-07 06:08:11

+0

不正确：很宽的表格会导致水平溢出。 – 2010-06-07 08:28:31

+1

这是真的，但如果你想逃避这一点，你可以将这些单词包装在服务器端，这样你就不会遇到任何问题。或者，在CSS中的另一个解决方案，把包含标签，固定宽度和隐藏溢出，与自动高度，所以布局不会破坏，并支持旧版浏览器（baah，我多么讨厌那些旧的浏览器... ） – 2010-06-07 08:45:29

0

如果你想要你的html.body或div液体;

div.sample{ width:100%;}

样品的div将调整是否你的屏幕大或小/ 没有滚动条/

来源

2010-06-07 11:26:34 spielersun

如何停止水平滚动？

回答

相关问题