Question

问题描述：我创建了一个HTML页面ContentPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Content Page</title>
        <link rel="stylesheet" type="text/css" href="ContentPage.css"/>
    </head>

    <body>

        <div id="containerDiv" style="position:absolute">

            <div id="headerDiv" style="position:relative">
                <img id="mailimage" src="mailView-topImage.png" alt="mailView-topImage.png"/>
                <input id="inputbutton" type="button" value="Reply"/>
            </div>

            <div class="tabular" style="position:relative">

                <div>
                     <div class="tabular-row">
                        <div class="tabular-cell">From:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Date:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Subject:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Attachment:</div>
                        <div class="tabular-cell values">
                        </div>
                    </div>
                </div>
            </div>
                <div id="messageBodyParent" style="position:relative;width:100%;height:100%">
                    <div id="messageBody">


                                aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                dddddd



                    </div>

                </div>

        </div>

    </body>

</html>

以下css ContentPage.css

body
{
    padding-bottom: .3em;
    padding-left: .3em;
    padding-top: .3em;
    padding-right: .3em;
    margin: .3em;
    overflow: hidden;
}

div
{
    overflow: hidden;
}

#containerDiv
{
    width: 100%;
    height: 100%;
}

#mailimage
{
    float: left;
}

#inputbutton
{
    background-color: white;
    height: 19px;
    color: green;
    font-size: 10px;
    vertical-align: middle;
    margin-right: 1em;
    float: right;
}

#messageBody
{
    position:relative;
    text-align: justify;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 1em;
    padding-left: .5em;
    width:90%;
    padding-right: .5em;
    height:60%;
    margin-right: 1em;
    border: grey 3px solid;
}

.tabular
{
    display: table;

}

.tabular-row
{
    display: table-row;
}

.tabular-cell
{
    display: table-cell;
}

.values
{
    padding-left: 3em;
}

我创建了一个“containerDiv”div（它包含所有其他div并作为完整的body容器工作）。

里面有“headerDiv”div（用于显示图像和回复按钮），“tabular”div（用于显示邮件标题），“messageBodyParent”div（用作“父”） messageBody“div” 和messageBody说明：在“messageBody”div中显示我的数据（它是邮件正文容器）。

我将“messageBodyParent”定位为“relative”，而“messageBody”定位为“absolute”。

但是当我调整窗口大小时，div的某些部分是不可见的，因为“messageBodyParent”是相对的，它应该根据窗口大小进行调整。

要求： - 数据不应在主体容器中溢出（messageBody div）。当我们将页面最小化时，应该使用滚动显示。

请做必要的事情。这真的很紧急。

如有任何疑问，请退回。

我会很感激。

Answer 1

这个怎么样？改变了几种我猜测你想要用于显示的样式。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Content Page</title>
        <link rel="stylesheet" type="text/css" href="ContentPage.css"/>
    </head>
    <body>
        <div id="containerDiv" style="position: absolute;">

            <div id="headerDiv" style="position:relative">
                <img id="mailimage" src="mailView-topImage.png" alt="mailView-topImage.png"/>
                <input id="inputbutton" type="button" value="Reply"/>
            </div>

            <div class="tabular" style="position:relative">
                <div>
                     <div class="tabular-row">
                        <div class="tabular-cell">From:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Date:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Subject:</div>
                        <div class="tabular-cell values"></div>
                    </div>

                    <div class="tabular-row">
                        <div class="tabular-cell">Attachment:</div>
                        <div class="tabular-cell values">
                        </div>
                    </div>
                </div>
            </div>

                <div id="messageBodyParent" style="position: relative; width: 100%; height: 100%;">
                    <div id="messageBody">
                                aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
                                dddddd
                    </div>
                </div>

        </div>
    </body>
</html>

CSS：

body
{
    overflow: hidden;
}

div
{
    overflow: hidden;
}

#containerDiv
{
    left: .6em;
    top: .6em;
    right: .6em;
    bottom: .6em;
}

#mailimage
{
    float: left;
}

#inputbutton
{
    position: absolute;
    right: 0em;
    background-color: white;
    height: 19px;
    color: green;
    font-size: 10px;
    vertical-align: middle;
}

#messageBody
{
    position: absolute;
    left: 0em;
    top: 1em;
    right: 0em;
    bottom: 5.4em;
    text-align: justify;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: .5em;
    padding-right: .5em;
    border: grey 3px solid;
}

.tabular
{
    display: table;

}

.tabular-row
{
    display: table-row;
}

.tabular-cell
{
    display: table-cell;
}

.values
{
    padding-left: 3em;
}

邮件正文数据在div外流动，而位置是相对的

1 个答案:

邮件正文数据在div外流动，而​​位置是相对的

1 个答案:

邮件正文数据在div外流动，而位置是相对的