Question

你好萌芽的网络爱好者。我担心自己会陷入困境，需要伸出援助之手。在当前的网络项目中，我遇到了一堵酸墙。这是代码。带上一只雄鹅。从代码中，它完全符合我的要求。 但这是问题。 div上有滚动条。我不希望我的div上有任何滚动条。我试过overflow-y：scroll;并摆脱水平滚动条但垂直滚动条仍在那里。我尝试了很多并搜索它但无济于事。 如何摆脱我的div中的垂直和水平滚动条，它仍然可以滚动。

编辑：我还需要它可以跨浏览器功能。不仅是铬。

HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Answer 1

我会使用这种技术：

#parent{
height: 100%;
width: 100%;
overflow: hidden;
}

#child{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}

这是一个有效的小提琴：http://jsfiddle.net/5GCsJ/954/

Answer 2

这是一种方法： HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
       <div class="richyPhoto2"> </div>
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: hidden;
}
.richyPhoto {
    width: 100%;
    height: 99%;
    border: 1px solid red;
    overflow: auto;
    padding-right: 15px;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: hidden;
}
.richyPhoto2 {
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

工作小提琴链接：No scrollbars scroll

在div中隐藏滚动条

2 个答案: