В печатных СМИ (Css), как установить маржу только для div?

Хе ребята, я сталкиваюсь с проблемой с печатными СМИ css. В html-странице есть два divs, тело & footer.В печатных СМИ (Css), как установить маржу только для div?

<div class="main-template-body" id="main-template-body"> 
    //content 
</div> 
<div class="main-template-footer"> 
    //footer 
</div>

При печати веб-страницы мне нужно установить нижний колонтитул внизу каждой страницы. Итак, я использовал следующий css &, он работает хорошо.

.main-template-footer { 
     display:block; 
     position:fixed; 
     bottom:0; 
     width:100%; 
     min-height:50px; 
     height:auto; 
}

для части тела, я использовал margin-bottom для установки границы с нижней границей страницы с последующим css. Чтобы избежать совпадения с нижним колонтитулом, но это не сработало.

.main-template-body { 
    width:100%; 
    height:auto; 
    display:block; 
    position:relative; 
    //margin-bottom: 20px; tried 
    //margin-bottom : 2cm; tried it too 
}

Мой вопрос, как я могу установить границы между «основным шаблоном-телом» сНом & печатью страница нижней границей, чтобы избежать дублирования тела с колонтитулом делами.

Следующий css устанавливает границу как для тела & нижний колонтитул.

@page { 
    margin-bottom: 4cm;//<- How to set this margin to specific div only? 
}

Спасибо заранее, ребята.

Редактировать: Я обновил изображения на 2 страницы ниже, где в нижнем колонтитуле первой страницы & перекрытия содержимого. Содержимое продолжает вторую страницу с первой страницы. Мне нужно установить маржу на контент, чтобы перекрытие не происходило.

источник

2016-11-22 Binod Lama

*** возможно *** экран @media, печать { \t div.main-шаблон тела {краю дна: 4см;}} –

@SoniVimal, я попробовал, и он не работал. Спасибо хоть. :) –

можете ли вы вставить свой код в фрагмент, чтобы увидеть проблему? –

Я не уверен, но я думаю, что это полезно для вас.

html, body{ 
 
     height: 100%; 
 
     margin: 0; 
 
    } 
 
    .main{ 
 
     min-height: 100%; 
 
     position: relative; 
 
    } 
 
    .main-template-footer { 
 
     height: 50px; 
 
     bottom: 0; 
 
     position: absolute; 
 
     width: 100%; 
 
    } 
 
    .main-template-body { 
 
     padding-bottom: 50px; 
 
    }

<div class="main"> 
 
    <div class="main-template-body" id="main-template-body"> 
 
     //content 
 
    </div> 
 
    <div class="main-template-footer"> 
 
     //footer 
 
    </div> 
 
</div>

источник

2016-11-22 11:15:32 Hit

Это не работает. & в печатных СМИ, похоже, используются единицы единиц измерения «cm, mm», а не «px». хмм ... –

В печатных СМИ (Css), как установить маржу только для div?

ответ

Смежные вопросы