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

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

html css

Html 邮件正文数据在div外部流动，而位置是相对的,html,css,css-position,Html,Css,Css Position,我已经创建了一个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>C

我已经创建了一个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>

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

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

我将“messageBodyParent”定位为“相对”，而将“messageBody”定位为“绝对”

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

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

这样如何？更改了几个样式，我猜是您想要的样式

HTML:

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;
}

<!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>

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;
}