Используя html / css, можно ли разместить нижний колонтитул (как на принтере) внизу каждой страницы? - PullRequest
2 голосов
/ 10 июня 2011

Мне нужно, чтобы нижний колонтитул печатался внизу каждой страницы (когда это печатается на бумаге, а не на экране, это просто) ...

Я использую таблицы, я знаюТаблицы плохие, я обычно их не использую, но это особый случай: (я использую элемент управления C # webBrowser и просто использую HTML для форматирования документа для печати).

Работает нормально, за исключением нижнего колонтитула на последней напечатанной странице ... первые страницы располагаются внизу, потому что содержимое страницы сдвигает его вниз, но на последней странице этотолько в нижней части содержимого (и содержимое не переходит в нижнюю часть страницы)

Вот изображение, которое нужно показать (это когда я запускаю предварительный просмотр моего веб-браузера).не возражайте против зеленого текста, просто для тестирования.

хороший и плохой нижний колонтитул http://pdem.info/badfooter.png

Как вы можете видеть, слева нижний колонтитул вынужден внизу содержимым, ис правой стороны нижний колонтитул находится в том же положении относительно содержимого, но я хочу, чтобы он был внизу!

Фрагмент моего нижнего колонтитула просто:

<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>

Любые идеи, какзаставить нижний колонтитул быть внизу?Я не возражаю против использования div, если есть способ заставить его работать так!

========= РЕДАКТИРОВАТЬ ======== *

Вот часть кода:

Код CSS:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
//I have tried doing position:absolute/fixed with values in pixes and percents
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

Код, который заполняет элемент управления webBrowser:

web_display.DocumentText = "";

            web_display.Document.Write("<body><table id='tblCont'><thead><tr><td>Your header goes here</td></tr></thead>" +
                "<tbody><tr><td>");
            web_display.Document.Write("<body><basefont size='2' face='verdana'>");
            web_display.Document.Write("<ul " + 
                "style='list-style:none;"+
                "padding-left:0px;"+
                "margin-left:0px;"+
                "'>");

            foreach (TNode part in tn.Nodes) {
                web_display.Document.Write("<li><strong>" + part.Text + "</strong>");
                web_display.Document.Write("<ul style='list-style:none;'>");

                foreach (TNode node in part.Nodes) {
                    web_display.Document.Write("<li><strong>" + node.Text + "</strong></li>");
                    web_display.Document.Write("<ol>");//this list will hold the textblock text

                    addTextBlk(web_display, node);

                    web_display.Document.Write("</ol>");//end textblock list
                    web_display.Document.Write("<br style='line-height:6px;'/>");
                }
                web_display.Document.Write("</ul>");//end lvl2 list
                web_display.Document.Write("</li>");//end part item
            }
            web_display.Document.Write("</ul>");//end part list
            //web_display.Document.Write("</li>");//end section item
            web_display.Document.Write("<br />");



            //web_display.Document.Write("</ul>");//end section list

            web_display.Document.Write("</td></tr></tbody><tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>" +
                "</table><div id='newFooter'>This is footer text</div></body>");

Ответы [ 2 ]

0 голосов
/ 10 июня 2011

РЕДАКТИРОВАТЬ - Примечание: Мое решение было опубликовано до того, как выглядело, как будто это было редактирование (при первом прочтении вопроса не было отображено ни одного изображения), а вопрос был изменен ответ теперь неактуально извините. Это может помочь вам в любом случае с чем-то еще.

Для согласованности на нескольких страницах я бы лично использовал div.

Следующая опция, CSS как (от макушки головы, я не знаю, будет ли это работать)

#footer {
height:100%;
vertical-align:bottom;
}

РЕДАКТИРОВАТЬ КОНЕЦ ЗДЕСЬ

Для этого я использую печатные и экранные носители, на вашей странице есть таблица стилей, подобная этой:

<link rel="stylesheet" href="style.css" type="text/css" media="print" />

Убедитесь, что ваша другая таблица стилей 'screen' помечена media = "screen"

Теперь в вашей таблице стилей введите код нижнего колонтитула, как вы хотели бы, чтобы он был напечатан, в этом примере я использую тег div:

#print_footer { border:0 solid #333; font-family:arial; font-size:8px; color:#000; margin-bottom:0; }

Откройте обычную таблицу стилей 'screen' и добавьте следующий класс

.no_screen { display:none; }

Это остановит отображение элемента на экране.

На вашей странице создайте свой DIV

<div id="print_footer" class="no_screen">Copyright &copy; 2011 Ryan. All rights reserved.</div>

Надеюсь, это поможет.

0 голосов
/ 10 июня 2011
<style type="text/css">    
#footer
    {
    position:absolute;
    left:200px;
    top:750px;
    }
</style>

Измените левое: и верхнее: в соответствии с вашей страницей. это поместит его абсолютно в нужное место.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...