CSS 三栏布局

Question

I'm looking for the best way to accomplish the following layout.我正在寻找完成以下布局的最佳方法。 I need to accommodate a header and footer of varying size, of which I am not in control.我需要容纳一个 header 和不同大小的页脚，我无法控制这些。 In between those elements, I need to set up a fixed three column layout.在这些元素之间，我需要设置一个固定的三列布局。 The total layout needs to always print on one standard page in landscape mode.总布局需要在横向模式下始终打印在一个标准页面上。 If I didn't have to allow for the header/footer, I know I could just use a fixed layout... but I can't.如果我不必允许页眉/页脚，我知道我可以使用固定布局......但我不能。 The layout needs to be:布局需要：

variable height header可变高度 header
div with three fixed width columns具有三个固定宽度列的 div
variable height footer可变高度页脚

ps sorry, don't yet know the proper way to display this graphically here:( ps 抱歉，还不知道在此处以图形方式显示此内容的正确方法:(

Answer 1

If you're looking to have text divided into three columns, for a treat, you could try CSS3's columns:如果您希望将文本分成三列，作为一种享受，您可以尝试 CSS3 的列：

This however, is not supported in older browsers.但是，旧版浏览器不支持此功能。

Answer 2

If you want to control how your page prints, use the @page rule, like this:如果要控制页面的打印方式，请使用 @page 规则，如下所示：

<html>
    <head>
        <style type="text/css">
            @page
            {
                size:portrait;
                margin:1in;
            }
        </style>
    </head>
    <body>...</body>
</html>

More info on @page can be found on the W3C's CSS 2 spec .有关@page 的更多信息，请参阅 W3C 的CSS 2 规范。

CSS 三栏布局

问题描述

2 个解决方案

解决方案1
1 2011-04-28 18:41:45

解决方案2
0 2011-04-28 19:40:15

CSS 三栏布局

问题描述

2 个解决方案

解决方案1 1 2011-04-28 18:41:45

解决方案2 0 2011-04-28 19:40:15

解决方案1
1 2011-04-28 18:41:45

解决方案2
0 2011-04-28 19:40:15