Как удержать дочерние элементы div от родительского при печати

Question

Я пытаюсь отформатировать HTML-страницу как заявление суда, которое должно быть аккуратно напечатано на листе бумаги размером 8,5 x 11.У меня он выглядит как спецификация HTML, но когда я иду на печать, Контейнер, содержащий содержимое, расширяется за пределы тела.

Я попытался установить для контейнера определенную ширину, соответствующую телу, но этоне работает.

Я создал скрипку с HTML и CSS:

См. скрипту здесь

Вот CSS для ТЕЛА иКОНТЕЙНЕР:

body {
    width: 8.5in;
    height: 11in;
    padding-left: 1.5in;
    padding-right: .5in;
    margin: 0;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.container {
    border-left: 2px solid black;
    border-right: 2px solid black;
    width: 8.5in;
    margin: 0;
    padding: 5px;
    height: 100%;
}

Если щелкнуть текст «Открыть предварительный просмотр» в нижней части результата, а затем попытаться выполнить печать, вы увидите, как документ изменяется в окне предварительного просмотра в Chrome.

Это приложение предназначено специально для работы в Chrome.Я пытаюсь создать документ, похожий на следующий, с более тонкими серыми линиями, обозначающими край страницы:

Answer 1

Я не уверен, что это решение , которое вы ищете. Я проверил ваш код в другом браузере print print и нашел другой результат. Затем я придерживаюсь Google Chrome и кодируется соответственно.

Я обнаружил, что вы использовали один и тот же код дважды, поэтому он не работал должным образом! Я поставил другой код для screen only. и измените следующий код для print

 @media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }

    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 100%;
        margin: 0;
        padding: 5px;
        height: 100%;
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
        padding-left: 1.5in;
        padding-right: .5in;
    }
}

В своем коде я удалил textarea, вместо этого я поместил тег <p> с возможностью редактирования. Пожалуйста, просмотрите код и сообщите мне ваше мнение.

И это то, что у меня есть в Google Chrome.

---

Я попробовал несколько вариантов, но не нашел подходящего! Но этот хитрый! Просто использовал следующий код для print CSS. Пожалуйста, замените и протестируйте этот код.

@media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        padding-left: 1.5in;
        padding-right: .5in;
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }
    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 6.5in;
        margin: 0 auto;
        padding: 10pt 36pt;
        /* height: 100%; */
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
    }
}

После этого я использовал настраиваемое поле в Google Chrome (хотя я его не печатал! Так что лучше тестируйте его для окончательного вывода).

Надеюсь, это удовлетворит вашу потребность! :)