Question

我正在为扫描的文档创建元数据。它生成的输出是一个html文件，该文件保留文本在图像中的位置。生成的输出html的结构如下所示。

    <page num="1" src="document_name">
        <Blocks>
            <line>
            <div coordinates="1777,2546,52,40" index="0" style="position:fixed;left:53.86%;top:33%;height:1.17%;width:1.51%;">content_at_that_position</div>
            </line>
        </Blocks>
    </page>
    <!-- There will be n number of line elements -->

因此，基本上，给定的扫描pdf将生成带有文本数据保留位置的输出html文件。我面临的问题是生成的html无法滚动。输出只能在现有的窗口大小中可视化。

如何使整个div集合可滚动？

我尝试将位置从固定更改为相对和绝对。但这会产生重叠的嘈杂输出。

例如：将其视为输入图像。

使用position:fixed 如您所见，滚动条不可用。

使用position:absolute 滚动选项可用，但是输出重叠且嘈杂。

我对HTML不太熟悉。请帮助我纠正这个小问题。Attaching a sample html file

Answer 1

因此，尽管我不确定您的要求，但我认为这是您要的（请参阅下面的代码）。我将blocks元素的溢出设置为“ overflow”，将空白设置为“ nowrap”。这将导致内容溢出屏幕并允许滚动。我根据您提供的html文档进行了此操作，并删除了存在的CSS。

<html>

<head></head>

<body>
  <page num="1" src="img/Document2 (1/Document2 (1-0.jpg">
    <blocks style="overflow: scroll;white-space: nowrap;">
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
    </blocks>
  </page>
</body>

</html>

如果超出屏幕，如何使固定位置div元素集合整体上可滚动

1 个答案: