0

我创建了一个 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 并作为完整的主体容器工作）。

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

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

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

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

4

1 回答 1

0

这个怎么样？更改了几种样式，我猜是您想要的展示样式。

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;
}
于 2012-09-12T15:59:36.900 回答