Необходимо, чтобы элемент div заполнял высоту своего родителя - PullRequest
Новая
       0

Необходимо, чтобы элемент div заполнял высоту своего родителя

1 голос
/ 17 июня 2020

Мне нужно создать документ идеального размера A4 с кодом PHP. Вот что я сделал до сих пор.

Print Preview Document

Как вы можете видеть на изображении выше, есть дополнительное пространство под двумя div. Мне нужно, чтобы эти 2 блока заполняли родительский размер.

Вот код 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 не соответствует высоте своего родителя?

Ответы [ 3 ]

0 голосов
/ 17 июня 2020

установить высоту класса .page на auto

<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;
      height: auto;
      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>
0 голосов
/ 17 июня 2020 
height: 100%;

Установка высоты класса страницы в CSS даст желаемый эффект. Вы также можете указать высоту соответствующим образом, изменив ее значение.

0 голосов
/ 17 июня 2020

Это то, чего вы ожидали? 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...