Question

我一直在愚弄下面的html代码。我已经将div id =“mainWide”设置为2500像素的宽度，这比我的屏幕宽，我想在主浏览器窗口处有一个水平滚动条，而不是div块本身。

我无法弄清楚这种行为，目前比我的屏幕宽的区域只是隐藏了，我无法滚动到窗口的这一部分

<html>
<title>Test of width</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

  <div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:140px; line-height:16px;" id="mysidebar">
    <div class="w3-bar-block">
      <a class="w3-bar-item w3-button w3-border-bottom" href="test1.html">test1</a>
      <a class="w3-bar-item w3-button w3-border-bottom" href="test2.html">test2</a>
      <a class="w3-bar-item w3-button w3-border-bottom" href="test3.html">test3</a>
    </div>
  </div>


  <div id="mainWide" style="margin-left:140px; width:2500px; height:500px; background-color: #11ffcc;">
    My page content
  </div>

</body>

</html>

Answer 1

您需要在overflow-x: auto css中应用body。请注意，左边的面板不会移动，因为它是fixed

＆＃13;

body {
  overflow-x: auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<title>Test of width</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:140px; line-height:16px;" id="mysidebar">
<div class="w3-bar-block">
<a class="w3-bar-item w3-button w3-border-bottom" href="test1.html">test1</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test2.html">test2</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test3.html">test3</a>
</div>
</div>


<div id ="mainWide" style="margin-left:140px; width:2500px; height:500px; background-color: #11ffcc;">
My page content
</div>

</body>
</html>

＆＃13;

Answer 2

试试这个，你的左侧div也会有你的滚动条。它将抓住包括身体在内的一切。如下图所示，在头部标签内关闭之前将其放置。

<style type="text/css">
html{overflow-x:scroll; }
</style>
</head>

Answer 3

很好，现在我有一个水平滚动条，代码如下

现在唯一的问题是水平滚动条只在右侧div部分，而不是整个窗口。

这意味着如果div的高度高于窗口的高度，则水平滚动条将被隐藏，直到您向下滚动到窗口的按钮。

如何解决这个问题？

<!DOCTYPE html>
<html>
<title>Test of width</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body style="overflow-x:auto">

<div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:140px; line-height:16px;" id="mysidebar">
<div class="w3-bar-block">
<a class="w3-bar-item w3-button w3-border-bottom" href="test1.html">test1</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test2.html">test2</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test3.html">test3</a>
</div>
</div>


<div id ="mainWide" style="margin-left:140px; width:2500px; height:2500px; background-color: #11ffcc;">
My page content
</div>

</body>
</html>

HTML：Wide <div>不生成水平滚动条

3 个答案: