Question

我的webproject出了问题。我在浏览器中显示的页面无法正常工作。

在我的任何页面上，如果内容扩展超过浏览器窗口的大小，浏览器将不会提供滚动条。尝试使用IE，Edge，Mozilla和Chrome。一切都一样。
我的网页非常相似。这是我最基本的页面（只显示pdf）

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

  <f:view locale="#{languageBean.locale}">
    <p:panel id="background" style="width:100%; height:100%;
    position:fixed; top:0; left:0; right:0; bottom:0">
      <p:panelGrid id="grid" columns="1"  style="position:fixed;
      width:100%; top:0; left:0; right:0; text-align:center" styleClass="ui-noborder">

        <h:head>
            <ui:include src="/header.xhtml" />
        </h:head>

        <body>
            <h:form id="form">
                <object id="pdfDisplay" type="application/pdf"
                    data="file.pdf"
                    width="830px" height="800px">
                </object>
            </h:form>
        </body>

        <ui:include src="/bottom.xhtml" />
     </p:panelGrid>
  </p:panel>
 </f:view>
</html>

两个包含的页面只是p：panelGrid，其中包含一些p：commandButton。每个页面的顶部和底部都包含哪些内容，与此页面相同。此外，我们只使用<body>标记内的<f:fiew>标记进行了尝试，其他所有内容都从页面中删除。

有人可以向我解释为什么浏览器不会显示其滚动条以及如何使其工作吗？

Answer 1

您将所有内容设置为position:fixed元素集到视口大小，没有溢出。所以，是的，它不会滚动，因为你特意告诉它不要。

#background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

<div id="background">Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.</div>

最简单的解决方案是停止这样做。删除你在#background元素上设置的所有CSS，以便它可以正常运行：

<div id="background">Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.</div>

不太简单的解决方案是将overflow:scroll或auto添加到该CSS。这可行，但是没有必要，除非您的样本中没有显示position:fixed内容存在的充分理由：

#background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow:auto;
}

<div id="background">Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.Lorem ipsum Dolores veniam incidunt sit et. Unde unde non minus deserunt reprehenderit voluptatem quia. Voluptas omnis officia iure voluptas. Est est molestiae mollitia incidunt aspernatur pariatur est dolorem. Veniam placeat veniam eveniet est qui ipsa. Corporis quam qui minus in ut.
Quo accusamus sit rerum alias quidem dolorum. Quidem illo et consequatur maiores officiis quibusdam dolorem voluptatem. Fugit occaecati eaque molestiae voluptatem non. Debitis numquam nihil eius. Et autem quis ipsam et debitis. Iure rerum optio nisi.
Placeat sed expedita et. Omnis facere blanditiis quis. Iure ut illum et quae esse exercitationem. Enim est quidem qui architecto facere vero nobis.
Enim quaerat quod tempora quo similique. Et qui voluptas aut corporis voluptatum. Tempora vel eligendi non harum porro sit libero. Reprehenderit quis praesentium voluptatem voluptatem. Excepturi non dolores autem.
Id eum labore eius sunt et doloremque. Fuga autem dolore quia. Dolor ab est vero in libero qui saepe sequi. Eos ad quae laborum mollitia quo natus. Nulla pariatur porro porro harum. Ipsa ratione neque ut quasi odit commodi omnis voluptatum.</div>

（与你的#grid相同;你也没有明显的理由将它设置到一个固定的位置。相信文档流！在实际需要之前不要覆盖它！）

浏览器中的滚动条缺失

1 个答案: