html - 如何使背景div不计入可滚动区域

Question

我有一种情况需要创建一个 div 元素，它比另一个 div 定义的视口(viewport)更宽。如果尝试更改各种 div 的边框、填充和边距但运气不佳。

这是 CSS:

#page_content {
    width:200px;
}

#content_container {
    overflow-y: auto;
    background-color:#999999;
}

#content_inner {
    padding:20px;
}

和html

<div id="page_content">
    <div id="content_container">
        <div id="content_inner">
            <div  style="height: 100px; width: 200px; background-color:#ff0000;">
                <div style="height: 10px; width: 500px; background-color:#ffff00;">
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle

我想要的是将可滚动区域限制在红色 div 之后 20px，但黄色 div 需要比视口(viewport)宽一点

Answer 1

我想通了:)

CSS

#page_content {
    width: 200px;
    height: 200px;
    margin:auto;
}

#content_container {
    overflow-y: auto;
    overflow-x: auto;
    background-color:#ffffff;
}

#content_inner {
    width: 200px;
    height: 200px;
}

.hex-row {
    margin-left: 17px;
    height: 50px;
    clear: left;
}

.hex-wrapper {
    text-align: center;
    float: left;
    position: relative;
    width: 30px;
    height: 50px;
    line-height: 50px;
    margin-right: 17px;
    margin-bottom: -24px;
}

.hex-wrapper.even {
    margin-top: 27px;
}

.hex {
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 50px;
    background: #114781;
}

.hex:before,  .hex:after{
    vertical-align: middle;
    content: " ";
    position: absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.hex:before {
    left: -15px;
    border-right: 15px solid #114781;
}

.hex:after {
    right: -15px;
    border-left: 15px solid #114781;
}

html

<div id="page_content">
    <div id="content_container">
        <div id="content_inner">
            <div style="width: 250px; height: 300px; background-color:#ff0000;">
                <div style="width: 280px;  height: 300px; margin-top: -50px; margin-left: -30px; overflow-x: hidden; overflow-y: hidden;">
                    <div style="height: 750; overflow-y: visible;">
                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>

                        <div class="hex-row" style="width: 550px; overflow-x: visible;">
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                            <div class="hex-wrapper"><div class="hex"></div></div>
                            <div class="hex-wrapper even"><div class="hex"></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Fiddle

诀窍是创建一个带有 overflow hidden 的视口(viewport) div，里面有一个更大的带有可见溢出的内容 div