これは.NET 3.5をターゲットとし、AJAX asp:UpdatePanelを使用しているASP.NET Webアプリケーションにあります。私のページレイアウトでは、ページの縦方向のスペースを5つのセクション（ヘッダー、最初のコンテンツ、2番目のコンテンツ、3番目のコンテンツ、&フッター）に分割しています。Divの左側のスクロール可能なリスト
第1のコンテンツ部分は、ページが（タイトル、いくつかの特性）のために生成された全体的な項目についての情報を含みます。 3番目のセクションには、ページのアイテムに関する追加情報テーブルが含まれています。ヘッダーとフッターは...まあ...ヘッダーとフッターです。
2番目のコンテンツセクションには2つのサブセクション、画像のリストと現在選択されている画像があります。リスト内のサムネイルの標準リストのように機能し、アイテムをクリックすると、現在選択されている画像がクリックされたサムネイルに更新されます。現在選択されている画像サブセクションは、AJAX asp.UpdatePanelで囲まれ、タイトル、プロパティテーブル、および選択内容が変更されるとすべて更新される画像が含まれます。
リストには十分な数のイメージを入れることができるので、すべてが表示されたときに、選択したイメージセクションを大きく押すことによって多くの空白が生成されます。
現在選択されている画像セクションは、ユーザーが表示したい画像のサイズ（小、中、大）に基づいて変更できる、更新パネル内に定義された高さを持ちます。
私が欲しいのは、オーバーフローのためにスクロールバーを使って、画像のリストのサイズを選択した画像セクションの高さに合わせることです。
シンプルなコンテンツと、divを定義する単純なHTMLページ（下）を作成しました。希望のレイアウト（上記）のように見えるようにするにはどうすればよいですか？私は浮動小数点を使って知っていることを試しましたが、何も私が望むように出て来ないようです。私は幅や高さを指定する必要はありません（選択した画像divの明示的な高さを除いて）、可能な場合は内容を自動的に調整します。
ありがとうございます！
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
div {
border-color: black;
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
}
div.image {
background-color: red;
color: white;
text-align: center;
}
#page-header {
padding: 10px;
height: 60px;
background-color: green;
color: white;
}
#page-footer {
padding: 10px;
height: 20px;
background-color: green;
color: white;
}
.section {
}
#first-section {
}
#second-section {
}
#second-section-scroll-list {
overflow-y: scroll;
//display: inline-table;
}
ul.scroll-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li.scroll-list-item {
border-color: black;
border-style: solid;
border-width: 1px;
text-align: center;
//display: table;
}
#second-section-content {
//display: inline-table;
}
#third-section {
}
</style>
</head>
<body>
<div id="page-header"><h2>My Page!<h2></div>
<div id="first-section" class="section">
<h1>The Item To Display</h1>
<table>
<tr>
<th>Property 1:</th>
<td>Value</td>
</tr>
<tr>
<th>Property 2:</th>
<td>Value</td>
</tr>
</table>
</div>
<div id="second-section" class="section">
<div id="second-section-scroll-list">
<ul class="scroll-list">
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
Image 1 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
Image 2 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
Image 3 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
Image 4 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
Image 5 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
Image 6 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
Image 7 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
Image 8 Description
</li>
<ul>
</div>
<div id="second-section-content">
<!-- This will be wrapped in an AJAX update panel -->
<div style="height: 800px; background-color: lightgray;">
<h2>Selected List Item</h2>
<table>
<tr>
<th>Property 1:</th>
<td>Value</td>
</tr>
<tr>
<th>Property 2:</th>
<td>Value</td>
</tr>
</table>
<div class="image" style="height:480;width:640;">Image of Selected Item</div>
</div>
</div>
</div>
<div id="third-section" class="section">
<table>
<tr>
<th>First</td>
<th>Second</td>
<th>Third</td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>1A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>2B</td>
</tr>
</table>
</div>
<div id="page-footer">End of My Page...</div>
</body>
</html>
クールな、それは私が行くつもりです - ちょうどそのボックスに留まるためにスクロールリストを得ることができませんでした。しかし、私は、CSSの高さを明示的に設定したくないと思っています。 UpdatePanelのコンテンツには、使用される画像のサイズを変更するボタンがあるためです。だから、デフォルトでは小さなサイズから始めるでしょうが、中程度か大きいかを選択することができます。コンテンツパネルのサイズを設定サイズに変更し、画像リストのサイズをコンテンツの高さに合わせて自動的に変更できるようにします。私はいくつかのCSSの設定やコンテンツのdivの高さが金とそれ以外のものの大きさと同じものを取ることを望んでいたと思います。 – CuppM
イメージリストのサイズがコンテンツの高さになる場合は、コンテンツの内側にあり、左に浮かなければなりません。また、ジャバスクリプトを使用して、あなたが話しているサイズ変更機能を含めることができます。 – sdo
それは私が恐れていたものです。画像をクリックしたときに影響を受けるリストのユーザーの位置を望んでいないので、コンテンツサイズのdivに入れることはできません。それがUpdatePanelの中にある場合は、リストも更新され、上にスクロールされます。 – CuppM