HTML'yi sayfa boyutlarına göre böl.

Dokümanları düzenlemek için bir webapp oluşturuyorum. Her belge birden fazla sayfaya sahip olabilir. Her bir sayfa sabit bir boyuttadır (Almanya'da DIN A4 olan ve 210 mm genişlik x 297 mm yüksekliğe sahip standart kağıt belgeleri kullanıyorum). Bu yüzden HTML'imin gövde boyutunu uygun şekilde ayarlıyorum.HTML'yi sayfa boyutlarına göre böl.

Bu belge zaten güzel görünüyor ve istediğim gibi. Web sayfamın içeriğimi otomatik olarak bir DIN A4 boyutuna (örneğin yukarıda belirttiğim gibi) sahip olan sayfalara (örn. div kutu) ayırmasını istediğim tek önemli sorun var.

Bunu nasıl yapabilirim? Sadece CSS olan bir çözüm varsa güzel olurdu, ama JavaScript de işe yarıyor. Sorunumu anlamanız için bir CodePen oluşturdum: example codepen

Belgenin bir sayfası dolduğunda yeni bir sayfa oluşturan Google Drive (Metin Belgeleri) gibi davranışı istiyorum. İşte bir ekran görüntüsü:

Google Drive Example

HTML

<html> 
    <body> 
    <h1>This is the title of the document</h1><b>Table of contents</b> 
    <ol> 
     <li>Das Programm</li> 
     <li>Hintergründe</li> 
     <li>Vision</li> 
    </ol> 
    <p>some random text</p> 
    </body> 
</html>

CSS

html { 
    background-color: #333; 
    width: 100%; 
    height: 100%; 
} 
body { 
    font: 15px arial; 
    width: 210mm; 
    height: 297mm; 
    background-color: #fff; 
    margin: 10px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 25mm 15mm 20mm 35mm; 
} 
h1 { 
    margin: 0 0 15px 0; 
} 
ol { 
    margin: 0; 
} 
li { 
    margin: 10px 0; 
}

kaynak

2014-07-10 wonderbummer

keman: Bilemezsin. HTML/CSS bunun için gerçekten tasarlanmamıştır. Muhtemelen bunun için bir çözüm var, ama emin olabilirim, çok sinirleneceksiniz, çünkü yolda pek çok tuzak olacak. Bunun için PDF gibi alternatif tekniklere bakmak isteyebilirsiniz. – RoToRa

Bunu yapabilirsiniz. Google Drive da bunu yapıyor, ancak nasıl olduğunu bilmiyorum. – wonderbummer

Google Drive tam olarak ne yapar? Sayfa olarak bir belge sayfası görüntülendiğinde mi demek istiyorsunuz? Bu, bir ** PDF ** (veya benzer bir belge formatı) dönüştürerek sunucu tarafında gerçekleşen bir şeydir. – RoToRa

kadarıyla ben farklı sayfalar halinde sayfayı bölemez ama düşünmek gibieklediğiniz tüm belgeyi kaydırılabilir yapabilirsiniz sizin cssdiv içeren belge

#document_carrier{ 
    width:500px; 
     height:350px; 
    border:2px solid #ccc; 
    overflow:auto; 

}

yüksekliğini ve genişliğini belirleyen sonra ihtiyaca göre gibi yüksekliğe ve genişliğe sahip olabilir .... aslında bana upload buton size göstermek için sadece olduğunu Sayfayı kaydırılabilir yapmak için ancak dosya yüklemek için diğer javascript işlevlerini veya diğer dil işlevlerini ekleyebilirsiniz.

js bu basit cevabı demo

kaynak

2014-07-10 10:05:58 anni

Teşekkür ederim, ama bu benim sorunum için bir çözüm değil. Gerekirse yazdırabileceğim birden fazla sayfaya sahip olmak istiyorum. – wonderbummer

HTML'yi sayfa boyutlarına göre böl.

cevap

İlgili konular