Question

我需要用PHP代码创建一个A4大小的文档。这是我到目前为止所做的。

如您在上图中所看到的，2 divs下方有一个额外的空间。我需要让这2个div填充父级尺寸。

这是HTML + CSS代码：

<html>

<head>
  <title></title>
  <style type="text/css">
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #FAFAFA;
    }
    
    * {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    
    .page {
      width: 210mm;
      min-height: 297mm;
      margin: 10mm auto;
      border: 1px #D3D3D3 solid;
      border-radius: 5px;
      background: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    .subpage {
      height: 257mm;
      display: flex;
    }
    
    @page {
      size: A4;
      margin: 0;
    }
    
    @media print {
      html,
      body {
        width: 210mm;
        height: 297mm;
      }
      .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
      }
    }
  </style>
</head>

<body>
  <div class="cv">
    <div class="page">
      <div class="subpage">
        <div style="background-color:#F8F8FF; width: 70%; height: 100%; min-height: 100%;">

        </div>
        <div style="background-color:#0BA9FE; width: 30%; display: flex; flex-direction: column;">

        </div>
      </div>
    </div>
  </div>
</body>

</html>

我在这里想念什么？ div为什么不适合其父代高度？

Answer 1

这是您的期望吗？

<html>

<head>
  <title></title>
  <style type="text/css">
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #FAFAFA;
    }
    
    * {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    
    .page {
      width: 210mm;
      min-height: 297mm;
      margin: 10mm auto;
      border: 1px #D3D3D3 solid;
      border-radius: 5px;
      background: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    .subpage {
      height: 297mm;
      display: flex;
    }
    
    @page {
      size: A4;
      margin: 0;
    }
    
    @media print {
      html,
      body {
        width: 210mm;
        height: 297mm;
      }
      .page {
        margin: 0;
        height: 100%;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
      }
    }
  </style>
</head>

<body>
  <div class="cv">
    <div class="page">
      <div class="subpage">

        <div style="background-color:#F8F8FF; width: 70%; height: 100%; min-height: 100%;">
        </div>

        <div style="background-color:#0BA9FE; width: 30%;">
        </div>

      </div>
    </div>
  </div>
</body>

</html>

Answer 2

将.page类的高度设置为npm install --save-dev @angular/cli@latest -g npm install --save-dev @angular/cli@latest

auto

Answer 3

height: 100%;

在CSS中设置页面类的高度会带来所需的效果，您也可以通过更改其值来相应地指定高度。

需要具有div元素以填充其父级的高度

3 个答案: