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

时间：2014-06-12 13:26:34

标签： html css scroll viewport

我有一种情况需要创建一个div元素，该元素比另一个div定义的视口更宽。如果尝试更改各种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需要比视口宽一点

2 个答案:

答案 0 :(得分：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

诀窍是创建一个隐藏溢出的视口div，内部div更大，内部有可见溢出

答案 1 :(得分：0)

我在我的项目中使用它，我创建了一个像这样的CSS 

div.scrolled {
  width: 1150px;
  height: 620px;
  overflow-y: scroll;
}

在我的html文件中，我只识别我要引入我的div的哪个区域，我这样做

div class="scrolled">
  <table>
    <thead>
        <tr>
        </tr>
    </thead>
  </table>
</div>

然后你就可以将你的卷轴放在＆＃39; y＆＃39;对齐，希望我帮助你

相关问题
最新问题