Question

我曾尝试在Google上以多种不同的方式记录这个问题。我找到了一个类似问题的结果。答复是这个问题太模糊了。这将是我的第一个问题，我会尽力尝试并尽可能详细。询问此问题的页面底部没有滚动条，表示使用了overflow-x:hidden。但是，当单击页面右上角的“还原”图标（关闭图标的左侧）时，您会注意到x或从左到右的滚动条现在已存在。这是我想要实现的效果。如何在最小化之前将页面写入没有从左到右滚动条的位置？这是我在CSS中的代码：

body {
overflow-x:hidden; 
overflow-y:auto; 
width:1650px;
max-width:1650px; background-image:url('LiraBG5.png'), url('LiraBG3.png');  
background-repeat:repeat-x, repeat; height:100%;
}

对于HTML：

<!DOCTYPE html>
<html>    
<head>    
<link href="Lira.css" rel="stylesheet" type="text/css" />    
</head>    
<body id="body">    
</body>    
</html>

我已经尝试overflow-x:auto;代替overflow-x:hidden;但是这会导致页面在最大化时具有x或从左到右的滚动条，这正是我想要避免的。是否可能需要JavaScript来实现此效果？

Answer 1

您不希望overflow-x: hidden - 这不会为您提供滚动条。从身体中删除它并尝试这样的事情（运行代码段并单击“完整页面”以查看它的实际效果）

#content {
  width: 1000px;
  margin: 0 auto;
  background: #aaa;
}

<div id="content">Content here</div>

这告诉div将其大小修正为1000像素宽，margin: 0 auto告诉它如果有空间则水平居中。如果没有空间，你会得到一个滚动条。

Answer 2

默认情况下，文档的HTML元素为overflow: auto。当文档中的内容超出浏览器窗口的边界时，这会导致滚动条出现。

就本网站而言。有一个居中的div，宽度为1000px。当浏览器窗口宽度减少到1000px以下时，默认情况下将显示html元素上的溢出。

作为旁注：许多现代网站都是使用响应式框架构建的（例如Bootstrap）。这些响应式框架确保所有内容在视口中都可见，无论窗口大小如何，因此无需水平滚动。

删除overflow-x：hidden;页面最小化时

2 个答案: