html布局，只有部分页面滚动

Question

我想创建一个分为3个部分的页面布局 - 一个固定宽度的列包含两个固定高度的行。和另一个具有固定宽度的列，可能包含多个项目（不仅适合视图）。

我正在寻找一种方法来使页面滚动只影响项目列，以便屏幕左侧（第一列）保持在视图中。

以下是布局的示例图像，以更好地说明含义：

Answer 1

为您的右侧列应用$("#showloader").replaceWith("<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' onclick='abc()'>Retry</span>"); function abc() { alert("abc"); } 。请查看以下示例HTML。

overflow:auto

SAMPLE DEMO

Answer 2

您可以使用框架或固定左列的位置。

.left
{
    position:fixed;
}

Answer 3

为什么不向右浮动你的物品容器，然后有一个左列，位置是固定的？

	.left { position:fixed;width:70% }
	.right { float:right;width:30%; }

	<div>
		<div class="left">
			This content is fixed and does not scroll
		</div>
		<div class="right">
			<ul>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
			</ul>
		</div>
	</div>