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 (画像と返信ボタンを表示するために使用されます)、「表形式」div (メールヘッダーを表示するために使用されます)、「messageBodyParent」div (「messageBody」div の親として使用されます) があります。 ) および messageBody の説明: "messageBody" div (メール本文コンテナー) にデータを表示します。
「messageBodyParent」を「相対」として位置付け、「messageBody」を「絶対」として位置付けます。
しかし、ウィンドウのサイズを変更すると、div の一部が表示されません。「messageBodyParent」は相対的であるため、ウィンドウのサイズに応じて調整する必要があります。
要件 : - ボディ コンテナ (messageBody div) でデータがオーバーフローしないようにする必要があります。また、ページを最小化したときにスクロールして表示される必要があります。