Question

我有一个内容为html的webview，我希望webview的边框占据所有屏幕，如下图所示

这是我的代码：

webView.loadData(html, "text/html; charset=utf-8", "UTF-8")

webView.settings.loadWithOverviewMode = true
webView.settings.useWideViewPort = true

我的xml代码：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.emoonadev.mickael.gestioclientel.Activities.PreviewPDFActivity">

    <WebView
        android:id="@+id/app_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

这是我的html：

    <!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>A simple, clean, and responsive HTML invoice template</title>

    <style>
                .invoice-box {
                    max-width: 800px;
                    margin: auto;
                    padding: 30px;
                    border: 1px solid #eee;
                    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
                    font-size: 16px;
                    line-height: 24px;
                    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
                    color: #555;
                }

            .invoice-box table {
                width: 100%;
                line-height: inherit;
                text-align: left;
            }

            .invoice-box table td {
                padding: 5px;
                vertical-align: top;
            }

            .invoice-box table tr td:nth-child(2) {
                text-align: right;
            }

            .invoice-box table tr.top table td {
                padding-bottom: 20px;
            }

            .invoice-box table tr.top table td.title {
                font-size: 45px;
                line-height: 45px;
                color: #333;
            }

            .invoice-box table tr.information table td {
                padding-bottom: 40px;
            }

            .invoice-box table tr.heading td {
                background: #eee;
                border-bottom: 1px solid #ddd;
                font-weight: bold;
            }

            .invoice-box table tr.details td {
                padding-bottom: 20px;
            }

            .invoice-box table tr.item td{
                border-bottom: 1px solid #eee;
            }

            .invoice-box table tr.item.last td {
                border-bottom: none;
            }

            .invoice-box table tr.total td:nth-child(2) {
                border-top: 2px solid #eee;
                font-weight: bold;
            }

            @media only screen and (max-width: 600px) {
                .invoice-box table tr.top table td {
                    width: 100%;
                    display: block;
                    text-align: center;
                }

                .invoice-box table tr.information table td {
                    width: 100%;
                    display: block;
                    text-align: center;
                }
            }

            /** RTL **/
            .rtl {
                direction: rtl;
                font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            }

            .rtl table {
                text-align: right;
            }

            .rtl table tr td:nth-child(2) {
                text-align: left;
            }

            #space{

            }


    </style>
</head>

<body>
<div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="6">
                <table>
                    <tr>
                        <td class="title">
                            <img src="#LOGO#" style="width:50%; max-width:300px;"/>
                        </td>


                        <td>
                            <strong><h2> #INVOICE_NUMBER# </h2></strong><br/>
                            Created: #INVOICE_DATE#
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="6">
                <table>
                    <tr>
                        <td>
                            #COMPANY_NAME#<br/>
                            #COMPANY_PHONE#<br/>
                            #COMPANY_ADDRESS#<br/>
                        </td>

                        <td>
                            #USER_NAME#<br/>
                            #USER_PHONE#<br/>
                            #USER_ADDRESS#<br/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="heading">
            <td>
                Item
            </td>

            <td>
                <center>Unit price HT</center>
            </td>

            <td>
                <center>Quantity</center>
            </td>

            <td>
                <center>HT</center>
            </td>

            <td>
                <center>VAT</center>
            </td>

            <td>
                <center>Price</center>
            </td>
        </tr>

        #ITEMS#

        <tr class="total">
            <td>
                <div id="space"><br/><br/><br/><br/></div>
                Total HT: #TOTAL_HT#<br/>
                VAT #VAT# %: #TOTAL_VAT#<br/>
                Discount: #DISCOUNT#<br/>
                Total TTC: #TOTAL_TTC#<br/>
                #TOTAL_AFTER_DISCOUNT#
            </td>
        </tr>
    </table>
</div>
</body>
</html>

谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢谢谢，谢谢，谢谢

Answer 1

我很难确定代码的哪个方面与您希望在整个屏幕上显示的内容框相关联。

您需要识别代码并使用CSS属性高度。我认为.invoice-box是正确的类标识符，但我无法确定。

.invoice-box {
    height: 100%;
}

使用内容框的百分比将始终确保该框占据窗口高度的100％。

希望这有帮助。

Webview更改高度大小

1 个答案: