Question

我需要一个包含3个主要部分的页面;页眉，页脚和内容。我希望页脚只有页脚水平滚动。其他部分将包含静态信息（地图和图表）。

以下是代码。我希望只在绿色框中看到一个滚动条！我错过了什么？

    
    #Header {
        position: absolute;
        top:0px;
        left: 0px;
        width: 100%;
        height: 200px;
        border: 1px solid red;
    }
    
    #Footer {
        position: fixed;
        bottom:0px;
        left: 0px;
        width: 100%;
        height: 180px;
        border: 2px solid blue;
        overflow: hidden;
    }
    
    #Footer_Inset {
        position: fixed;
        bottom:10px;
        left: 10px;
        width: 3000px;
        overflow-style: scrollbar;
        height: 160px;
        border: 2px solid Green;
    }

    <body>
    
        <div id="Header"></div>
        <div id="Footer">
    
            <div id="Footer_Inset"></div>
    
        </div>
    </body>

Answer 1

如果我理解正确，您应该将overflow-x: scroll添加到#Footer并从overflow-style: scrollbar删除#Footer_Inset。

Answer 2

http://jsfiddle.net/ds1hc4L3/

尝试将溢出放在#Footer而不是Footer_Inset

中

position: fixed #Footer_Inset也遇到了问题。由于#Footer已经修复，使用静态定位对我来说似乎没问题。

    #Header {
        position: absolute;
        top:0px;
        left: 0px;
        width: 100%;
        height: 200px;
        border: 1px solid red;
    }

    #Footer {
        position: fixed;
        bottom:0px;
        left: 0px;
        width: 100%;
        height: 180px;
        border: 2px solid blue;
        overflow-x: auto;
        padding: 10px;
    }

    #Footer_Inset {
        width: 3000px;
        height: 160px;
        border: 2px solid Green;
    }

Answer 3

在#Footer更改为overflow-x: auto;。从position: fixed;移除#Footer_Inset。

http://jsfiddle.net/wilchow/uh53xejm/

#Header {
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 200px;
    border: 1px solid red;
}

#Footer {
    position: fixed;
    bottom:0px;
    left: 0px;
    width: 100%;
    height: 180px;
    border: 2px solid blue;
    overflow-x: auto;
}

#Footer_Inset {
    bottom:10px;
    left: 10px;
    width: 3000px;
    height: 160px;
    border: 2px solid Green;
    display: block;
}

Answer 4

<强> HTML：

<div id="Header">static content</div>
<div id="Footer">
    static content
    <div id="Footer_Inset">
        <div id="Footer_Content">scrollable horizontally</div>
    </div>

</div>

<强> CSS：

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#Header {
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 200px;
    border: 1px solid red;
}

#Footer {
    position: fixed;
    bottom:0px;
    left: 0px;
    width: 100%;
    height: 180px;
    border: 2px solid blue;
}

#Footer_Inset {
    overflow-x: scroll;
    height: 160px;
    border: 2px solid Green;
}

#Footer_Content {
    width: 3000px;
}

jsfiddle

inset div仅包含滚动

4 个答案: