我可以帮助您翻译以下内容:
当浏览器窗口小于页面宽度(例如在此示例中为300像素)时,将出现水平滚动条,并且固定列将保持固定并飞过内容列。我想避免这种情况。
我能否仅使用CSS(无Javascript)实现仅垂直固定?
请参见完整示例Plunker。 澄清:垂直滚动条必须是窗口滚动条,而不是
我有一个居中的页面,有两列填充窗口高度。 左侧列是固定的,因此在滚动时始终可见。 右侧列包裹页面内容,通常会比左侧列更大。
HTML:
<div class="main-container">
<div class="col1">
<p>Fixed column</p>
</div>
<div class="col2">
<p>Content column</p>
</div>
</div>
CSS:
.main-container {
width: 300px;
height: 100%;
margin: 0 auto;
}
.col1 {
position: fixed;
width: 100px;
height: 100%;
background: fuchsia;
}
.col2 {
width: 200px;
margin-left: 100px;
background: cyan;
}
当浏览器窗口小于页面宽度(例如在此示例中为300像素)时,将出现水平滚动条,并且固定列将保持固定并飞过内容列。我想避免这种情况。
我能否仅使用CSS(无Javascript)实现仅垂直固定?
请参见完整示例Plunker。 澄清:垂直滚动条必须是窗口滚动条,而不是
.col2
中的内部滚动条。