Question

我正在研究HTML中的简单布局，并尝试弄清楚为什么Chorme显示水平滚动条，即使screen.availWidth足够了？

这是HTML：

<!DOCTYPE html>
<html class="x-strict x-viewport">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
   </head>
   <body style="width: 100%;height: 100vh;margin: 0px;" id="ext-gen1001">
      <div style="padding: 5px 0px 0px;border-width: 0px;height: 60px;right: auto;left: 0px;top: 0px;margin: 0px;width: 1366px;position: absolute !important;background-color: #FFF;" id="appheader-1009"></div>
      <div style="padding: 0px;margin: 0px;border-width: 0px;overflow: auto;right: auto;left: 0px;top: 60px;height: 607px;width: 1366px;background-color: #FFF;zoom: 1;position: absolute !important;" id="container-1010">
         <div style="border-width: 0px;right: auto;left: 45px;top: 0px;margin: 0px;height: 870px;width: 1321px;background: rgb(241, 241, 241);position: absolute !important;direction: ltr;" id="pagemanager-1011"></div>
         <div style="margin: 0px;width: 45px;right: auto;left: 0px;top: 0px;height: 870px;background-color: #292d33;position: absolute !important;" id="navigation-1055"></div>
      </div>
   </body>
</html>

以下是它的样子：

以下是控制台告诉我的内容：

令我惊讶的是，IE工作正常。

有人可以帮忙吗？

Answer 1

Please remove :-   width: 1366px;
or put             width:auto;

Chrome正在显示不需要的水平滚动条

1 个答案: