css - 使用 CSS 3 的全高滚动

Question

我正在尝试布局网页。我的网页将在左上角有一个搜索框。搜索框下方是我的导航项。主要内容将放在正确的区域。我正在使用 Zurb Foundation 5 来创建它。目前，我的 HTML 如下所示:

<div class="full-width full-height" style='width: 100%; max-width: 100%; height:100%;'>
    <div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
        <div class="row collapse">
            <div class="small-12 columns">
                <input id='search' type="text" />
            </div>
        </div>
        <div class="row">
            <div class="small-12 columns">
                <!-- My vertical list of navigation items will go here in a <ul> -->
            </div>
        </div>
    </div>

    <div class="large-9 columns">
        <!-- The main content will go here -->
    </div>
</div>

我需要左侧部分的背景色为“ Jade 米丝”。它应该始终占据屏幕的整个高度。这行得通。如果导航项多于可用空间，滚动条只需要用于导航项。换句话说，我需要搜索框始终可见。目前，这是行不通的。我创建的滚动条延伸到可见页面区域下方。我还有以下相关的CSS

*{ padding:0; margin:0}
html, body { height:100% }

我该怎么办

a) 让滚动条在导航区域的边界内工作？

b) 确保它与导航区域的边界右对齐齐平？

Answer 1

你要找的是 overflow: auto

这应该放在导航容器上。您可以在该容器上添加一个 .navigation 类

<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
    <div class="row collapse">
        <div class="small-12 columns">
            <input id='search' type="text" />
        </div>
    </div>

    <div class="row NAVIGATION"> <!-- Add class to target nav -->
        <div class="small-12 columns">
            <!-- My vertical list of navigation items will go here in a <ul> -->
        </div>
    </div>
</div>

那么 CSS 将是:

.navigation {
  overflow: auto;
  height: whatever you want it to be;
}

编辑:

基于您的 Fiddle 。我用 oveflow auto 做了导航http://jsfiddle.net/yxMn3/1/