CSS 打印宽度不适用

Question

我一直在尝试让我的#content div 在打印样式表中的宽度为 100%。无论我尝试什么，我似乎都无法让它发挥作用。

可以在此处看到视觉效果的屏幕截图：http://t.co/brgvKPtKxA

标头消息 100% 传递——这很有趣，但没有别的。

我的 CSS 看起来像：

@media print {

    html, body, #content { width: 100%; padding: 0; margin: 0; display: block; overflow: visible; padding-right: 30px; }
    @page { size: portrait; margin: 1cm; }
    nav, #search, footer, #breadcrumbs, #pull-search, #scroll-to-top, img, #aside { display: none; }

    h1 { font-size: 22pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    p, ul, ol { font: 10pt/13pt Times New Roman, serif; }
    table { page-break-inside : avoid; }

    header:before {
        display: block;
        content: "Thank you for printing our content at www.schoolcraft.edu. Please check back often for news and updates.";
        border: 1px solid #bbb;
        font-style: italic;
        padding: 3px 5px;
        margin: 0 0 10px 0;
    }

} /* end of print query */

我的代码有点乱，因为我每一秒都在尝试新事物。我以前遇到过这种情况，但我从来没有这么难过。有什么建议吗？

感谢您的时间和帮助。

玛丽亚

HTML 代码片段：

<section id="content">               
<div class="sf_cols">
    <div class="sf_colsOut sf_2cols_1_75" style="width: 76%; ">
        <div id="MainContent_Content_C004_Col00" class="sf_colsIn sf_2cols_1in_75" style="margin: 0px 70px 0px 0px; ">
            <div class='sfContentBlock'>
                <h1>Heading</h1> 
                <p>Maecenas laoreet bibendum nisi, vitae pharetra dolor. Sed id viverra enim, semper tincidunt magna. Curabitur varius nisl vel sapien commodo, id gravida ipsum elementum. Integer dui orci, malesuada eget hendrerit tempor, interdum vel tortor. Phasellus quis leo aliquet, feugiat turpis sed, egestas libero. Duis placerat hendrerit lacus in vulputate. Aliquam tristique, neque vel vehicula eleifend, urna erat imperdiet orci, id pulvinar tellus nisi in quam. Etiam a varius justo. Quisque consectetur commodo velit ac laoreet. Suspendisse aliquet vehicula urna. Vestibulum at justo non nibh placerat aliquet vel a arcu. Morbi at convallis ante. Vivamus in nulla quis mauris ornare tempus. Nam ultrices nisi quis nisi ullamcorper iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
            </div>
        </div>
    </div>
    <div class="sf_colsOut sf_2cols_2_25" style="width: 24%; ">
        <div id="MainContent_Content_C004_Col01" class="sf_colsIn sf_2cols_2in_25" style="margin: 0px; ">            
        </div>
    </div>
</div>

Answer 1

删除这些：

style="width: 76%;"

style="width: 24%;"

并为您的 div:s 添加 id:s (id="content_right", id="content_left")，如下所示：

<section id="content">               
<div class="sf_cols">
    <div id="content_left" class="sf_colsOut sf_2cols_1_75">
        <div id="MainContent_Content_C004_Col00" class="sf_colsIn sf_2cols_1in_75" style="margin: 0px 70px 0px 0px; ">
            <div class='sfContentBlock'>
                <h1>Heading</h1> 
                <p>Maecenas laoreet bibendum nisi, vitae pharetra dolor. Sed id viverra enim, semper tincidunt magna. Curabitur varius nisl vel sapien commodo, id gravida ipsum elementum. Integer dui orci, malesuada eget hendrerit tempor, interdum vel tortor. Phasellus quis leo aliquet, feugiat turpis sed, egestas libero. Duis placerat hendrerit lacus in vulputate. Aliquam tristique, neque vel vehicula eleifend, urna erat imperdiet orci, id pulvinar tellus nisi in quam. Etiam a varius justo. Quisque consectetur commodo velit ac laoreet. Suspendisse aliquet vehicula urna. Vestibulum at justo non nibh placerat aliquet vel a arcu. Morbi at convallis ante. Vivamus in nulla quis mauris ornare tempus. Nam ultrices nisi quis nisi ullamcorper iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
            </div>
        </div>
    </div>
    <div id="content_right" class="sf_colsOut sf_2cols_2_25">
        <div id="MainContent_Content_C004_Col01" class="sf_colsIn sf_2cols_2in_25" style="margin: 0px; ">            
        </div>
    </div>
</div>

然后将其添加到您的桌面 css：

#content_left {
  width: 76%;
}

#content_right {
  width: 24%;
}