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>

我需要左侧部分的背景颜色为'cornsilk'。它应该总是占据屏幕的整个高度。这有效。如果导航项多于可用空间，则需要仅对导航项使用滚动条。换句话说，我需要搜索框始终可见。这时，这不起作用。我创建的滚动条延伸到可见页面区域下方。我还有以下相关的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;
}

修改

基于你的小提琴。我用oveflow auto http://jsfiddle.net/yxMn3/1/
进行导航

使用CSS 3完全高度滚动

1 个答案: