不支持CSS打印寬度

Question

我一直試圖在打印樣式表中簡單地讓我的＃內容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%;" 

，並添加編號：s（ID = 「content_right」 ID =「content_left 「）爲你的div：是這樣的：

<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%; 
}