Question

我喜欢这样的模板我想设置每个div都有适当的高度和屏幕如果用户在小屏幕上打开这个页面比我不想改变我的html的结果所以我应该在我的CSS中改变什么来制作每个屏幕都有适当的输出。

{block name="head"}
<link rel="stylesheet" href="css/screen.css">
<style>
div{
border: 1px solid gray;
magin : 0 auto;
}
.main{
  width:100%; 
  height:100%;  
  margin :0;
  padding: 0;
  border: 1px solid gray;
}
.left{
  width:300px; 
  height:300px;
  margin : 0 px;
  float:left;
}
.order{
  width:300px; 
  height:300px;
}
.csscalc{ 
  width:300px;
}
.table{
  margin-bottom:
}
.item{
margin-left:300px;
}
</style>
{/block}
{block name="body"}
<form>
<a href="index.php" style="font-size:20px; text-decoration:none;">Home</a>
<div class="main">
  <!--left Div Start -->
  <div class="left">
     <div class="order">

     </div>
     <div class="csscalc">
      <input type="submit" value="1" name="qty" class="calc">
      <input type="submit" value="2" name="qty" class="calc">
      <input type="submit" value="3" name="qty" class="calc">
      <input type="submit" value="4" name="qty" class="calc">
      <input type="submit" value="5" name="qty" class="calc">
      <input type="submit" value="6" name="qty" class="calc">
      <input type="submit" value="7" name="qty" class="calc">
      <input type="submit" value="8" name="qty" class="calc">
      <input type="submit" value="9" name="qty" class="calc">
      <input type="submit" value="10" name="qty" class="calc">
      <input type="submit" value="250" name="qty" class="calc">
      <input type="submit" value="500" name="qty" class="calc">
      <input type="submit" value="750" name="qty" class="calc">
      <input type="submit" value="1000" name="qty" class="calc">
     </div>
     <div class="table">
       {section name="sec1" loop=$tableArray}
         <input type="submit" class="in" value="{$tableArray[sec1].ordertableNm}" name="ordertableId">
       {/section}
       {section name="sec2" loop=$outArray}
         <input type="submit" class="out" value="{$outArray[sec2].ordertableNm}" name="ordertableId">
       {/section}
     </div>
  </div>
  <!--left Div End -->
  <div class="item">
    {section name="sec" loop=$itemArray}
        <input type="submit" class="btn" value="{$itemArray[sec].itemNm}" name="{$itemArray[sec].itemId}">
    {/section}
  </div>
</div>
</form>
{/block}

Answer 1

我想属性vh和vw可能会成为你的朋友。

height: 100vh; /* 100% of viewport height */
width: 100vw; /* 100% of viewport width */

但您也可以查看vmin，vmax。 vh表示：视口高度的百分比。 vw表示：视口宽度的百分比。

这是与您的问题相关的obligatory link。

如果您对使您的网站在不同屏幕尺寸上“看起来很酷”的一般方法感兴趣，我会建议Leo狮子会的建议。一种简单的方法是使用Bootstrap。

Answer 2

您必须将父HTML标记高度设置为100％。如果未设置其父级的高度，则元素的高度将为0％。像那样：

＆＃13;

<html>
  <head>
  </head>
  <body>
    <main>
      <div class="fill">100% width and height</div>
    </main>
  </body>
</html>

＆＃13;

Below is my code.
package com.highradius.converthtmltopdf;

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileWriter;
import java.io.IOException;

import com.itextpdf.text.BaseColor;
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Font;
import com.itextpdf.text.FontFactory;
import com.itextpdf.text.FontProvider;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.pdf.BaseFont;
import com.itextpdf.text.pdf.PdfAWriter;
import com.itextpdf.text.pdf.PdfReader;
import com.itextpdf.text.pdf.PdfWriter;
import com.itextpdf.text.pdf.parser.PdfTextExtractor;
import com.itextpdf.tool.xml.XMLWorkerHelper;
import com.itextpdf.tool.xml.css.CssFile;
import com.itextpdf.tool.xml.pipeline.css.CSSResolver;

public class ConvertHtmlToPDF 
{
    final static String HTML = "EMAIL_BODY_acc_102712_amount__20150611_201726170.html";
    final static String PDF= "NewPdf1.pdf";
    final static String TXT= "Text.txt";
    static File HtmlFile= null;
    static File PdfFile= null;
    protected void convertHtmlToPdf (File HtmlFile, File PdfFile ) {

        try{
            FontFactory.registerDirectories();
            Document document = new Document();
            document.setPageCount(100);
            document.setHtmlStyleClass(TXT);
            document.setPageSize(PageSize.A3);
            PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(PdfFile));
            writer.setFullCompression();
            writer.setInitialLeading(12.5f);
            document.open();
            XMLWorkerHelper.getInstance().parseXHtml(writer, document,
                    new FileInputStream(HtmlFile)); 
//          CssFile cssfile=XMLWorkerHelper.getCSS(new FileInputStream(HtmlFile));
            CSSResolver cssResolver = XMLWorkerHelper.getInstance().getDefaultCssResolver(false);  
            cssResolver.addCss("table tr td{text-align:center; border:1px solid gray;padding:4px;}", true);
            cssResolver.clear();
            document.close();
            System.out.println( "PDF Created!" );
        }
        catch (Exception e) {
            e.printStackTrace();
        }
    }
    public  void convertPDFToText(String Pdf,String Txt){
        try{
            FileWriter fw=new FileWriter(Txt);
            BufferedWriter bw=new BufferedWriter(fw);
            PdfReader pr=new PdfReader(Pdf);
            int pNum=pr.getNumberOfPages();
            for(int page=1;page<=pNum;page++){
                String text=PdfTextExtractor.getTextFromPage(pr, page);
                bw.write(text);
                bw.newLine();
            }
            bw.flush();
            bw.close();
        }catch(Exception e){e.printStackTrace();}

    }
    public static void main(String[] args) {

        ConvertHtmlToPDF chtp = new ConvertHtmlToPDF();
        HtmlFile= new File(HTML);
        PdfFile= new File(PDF);
        chtp.convertHtmlToPdf(HtmlFile, PdfFile);
        chtp.convertPDFToText(PDF, TXT);

    }
}
My HTMLFile

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></meta>
<meta name="Generator" content="Microsoft Word 14 (filtered medium)"></meta>
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
    {font-family:Tahoma;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:blue;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:purple;
    text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
    {mso-style-priority:99;
    mso-style-link:"Balloon Text Char";
    margin:0cm;
    margin-bottom:.0001pt;
    font-size:8.0pt;
    font-family:"Tahoma","sans-serif";
    mso-fareast-language:EN-US;}
span.EmailStyle17
    {mso-style-type:personal-compose;
    font-family:"Calibri","sans-serif";
    color:windowtext;}
span.BalloonTextChar
    {mso-style-name:"Balloon Text Char";
    mso-style-priority:99;
    mso-style-link:"Balloon Text";
    font-family:"Tahoma","sans-serif";}
.MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri","sans-serif";
    mso-fareast-language:EN-US;}
@page WordSection1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
    {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-IE" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">FYI<o:p></o:p></p>
<p class="MsoNormal"><o:p>&nbsp;</o:p></p>
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="224" style="width:168.0pt;margin-left:-.75pt;border-collapse:collapse">
<tbody>
<tr style="height:15.0pt">
<td width="77" nowrap="" valign="bottom" style="width:58.0pt;background:gray;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><b><span style="color:white;mso-fareast-language:EN-IE">Number<o:p></o:p></span></b></p>
</td>
<td width="63" nowrap="" valign="bottom" style="width:47.0pt;background:gray;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><b><span style="color:white;mso-fareast-language:EN-IE">Currency<o:p></o:p></span></b></p>
</td>
<td width="84" nowrap="" valign="bottom" style="width:63.0pt;background:gray;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><b><span style="color:white;mso-fareast-language:EN-IE">Balance Due<o:p></o:p></span></b></p>
</td>
</tr>
<tr style="height:15.0pt">
<td width="77" nowrap="" valign="bottom" style="width:58.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:black;mso-fareast-language:EN-IE">3140552178<o:p></o:p></span></p>
</td>
<td width="63" nowrap="" valign="bottom" style="width:47.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><span style="color:black;mso-fareast-language:EN-IE">EUR<o:p></o:p></span></p>
</td>
<td width="84" nowrap="" valign="bottom" style="width:63.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:red;mso-fareast-language:EN-IE">-1,786.38
</span><span style="color:black;mso-fareast-language:EN-IE"><o:p></o:p></span></p>
</td>
</tr>
<tr style="height:15.0pt">
<td width="77" nowrap="" valign="bottom" style="width:58.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:black;mso-fareast-language:EN-IE">3700081975<o:p></o:p></span></p>
</td>
<td width="63" nowrap="" valign="bottom" style="width:47.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><span style="color:black;mso-fareast-language:EN-IE">EUR<o:p></o:p></span></p>
</td>
<td width="84" nowrap="" valign="bottom" style="width:63.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:red;mso-fareast-language:EN-IE">-1,005.00
</span><span style="color:black;mso-fareast-language:EN-IE"><o:p></o:p></span></p>
</td>
</tr>
<tr style="height:15.0pt">
<td width="77" nowrap="" valign="bottom" style="width:58.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:black;mso-fareast-language:EN-IE">3700081976<o:p></o:p></span></p>
</td>
<td width="63" nowrap="" valign="bottom" style="width:47.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal"><span style="color:black;mso-fareast-language:EN-IE">EUR<o:p></o:p></span></p>
</td>
<td width="84" nowrap="" valign="bottom" style="width:63.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:15.0pt">
<p class="MsoNormal" align="right" style="text-align:right"><span style="color:red;mso-fareast-language:EN-IE">-1,005.00
</span><span style="color:black;mso-fareast-language:EN-IE"><o:p></o:p></span></p>
</td>
</tr>
</div>
</body>
</html>


Output:

CurrencBalance
Number y Due
31405521
78 EUR -1,786.38
37000819
75 EUR -1,005.00
37000819
76 EUR -1,005.00
31405121
97 EUR 131.05
31405121
98 EUR 702.88

I need all the td tags in the same line with out any break.

＆＃13;

Answer 3

好吧，你可以设置主position:relative，并添加类似这样的特殊类。

position: absolute;
top: 0;
bottom: 0;
width: 100%;
min-height: 100%;
z-index: 1 (if it needed)

这不是最佳解决方案，但我不明白，在完整窗口中必须显示div究竟是什么。

Answer 4

如果你想要100％高度工作，你必须确保你已经设置了

html, body{ height:100% }

就像那样：http://codepen.io/anon/pen/NqwaRx

因为每个接收％高度的子元素都将具有其父元素的％高度。

Answer 5

你需要传播 .main的每个家长才能拥有100％的高度和宽度，包括＆＃39;正如noa-dev所说＆＃39; HTML和正文。

html,
body,
.main{
  height:100%;
  width:100%;
}

这仍然可以纯粹用css实现。您只需要识别main的每个父级并将其添加到上面的样式中。

100％高度和宽度的屏幕

5 个答案: