Fatal编程技术网
  • html/
  • Html 如何使背景div在可滚动区域中不计数

Html 如何使背景div在可滚动区域中不计数

html css scroll

Html 如何使背景div在可滚动区域中不计数,html,css,scroll,viewport,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_con

我有一种情况，我需要创建一个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>

我想要的是将可滚动区域限制为超过红色div的20px，但黄色div需要比视口宽一点

div.scrolled {
  width: 1150px;
  height: 620px;
  overflow-y: scroll;
}
在我的html文件中，我只标识我想引入到div中的区域，我这样做了

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

div class=“滚动”>
你的卷轴将以“y”对齐，希望我帮了你

我弄明白了：）

css

html

诀窍是创建一个包含隐藏溢出的视口div，其中包含一个包含可见溢出的较大内容div

，就像这样？我应该提到我需要内部div滚动…我迷路了，您试图实现的最终结果是什么？这是我正在做的一个更完整的例子。我需要六边形右边的额外空间，以便它们正确渲染。但我不想滚动过红色div的边缘，否则我会看到空白区域，六边形的一部分应该需要内部div和外部div来滚动，但仅限于外部div的范围。内部div的内容需要在可滚动区域之外的空间进行渲染。在您的代码中，似乎需要一个包含“内部内容”的可滚动区域，因为在你的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;
}

<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>