Hi,
Für eine Applikation (die nur unter IE laufen muss) habe ich eine "Non-Scrolling Area" gebastelt wie sie früher unter WinHelp angezeigt wurde. Das ganze soll aber NUR beim Anzeigen auf dem Bildschirm aktiviert sein und NICHT beim Drucken!!
Ich habe dazu folgende Container erstellt:
<div id="nsa"><div class="cont">
INHALT DER NONSCROLLING AREA
</div></div><div id="sa"><div class="cont">
INHALT DER SEITE
</div></div>
In einer nsa.css habe ich folgenden Code:
@media screen
{
body
{
margin:0;
padding:0;
overflow:hidden;
}
#nsa
{
width:100%;
border-bottom: 1px black solid;
}
#sa
{
width: 100%;
margin-left:0;
overflow:auto;
}
div.cont
{
margin: 0;
margin-left: 10px;
margin-right: 10px;
}
}
Man sieht schon: Dieser soll NUR NUR NUR zugeordnet werden bei der Darstellung am Bildschirm. ZUSÄTZLICH binde ich mit
<link href="nsa.css" rel="stylesheet" type="text/css" media="screen">
ein. Also wieder mit media=screen. Leider funktioniert das beim Drucken nicht. In IE wird eine Art "Screenshot" gedruckt, also man sieht den ersten Teil des Inhaltes und rechts davon eine Scrollleiste. Beim FF sieht man zwar die Scroll-Leiste nicht, aber es wird ebenfalls nur die erste (am Display sichtbare) Seite gedruckt.
Mache ich dabei was falsch? Falls nicht, gibt es einen Workaround für das Problem?
PS: Für das Beispiel jetzt nicht von Bedeutung, aber wen es interessiert: Die Größe der div-Container wird scriptbasiert zugewiesen - per onLoad und onResize:
function resize()
{
var height_window = document.body.clientHeight;
var height_nsa = document.getElementById('nsa').offsetHeight;
if(height_window - height_nsa > 10)
{
document.getElementById('sa').style.height = height_window - height_nsa;
document.getElementById('sa').style.overflow = 'auto';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
else
{
// alert('FIXXME: Fehler beim Nonscrollingarea!');
document.getElementsByTagName('body')[0].style.overflow = 'auto';
document.getElementById('sa').style.overflow = 'visible';
}
}