Question

互联网上曾多次询问过这个问题。但是，我无法找到适合我的解决方案。我需要保持垂直滚动的能力，但是在y方向上始终隐藏滚动条。

我需要我的#content-main div独立于每个其他div滚动。这是按原样工作的;但是，我有一个滚动条我需要摆脱，但我不知道如何或为什么这么难做。

我的代码设置如下：

<body>
    <div id="ipad"> 
        <div id="sidebar-main">
            <div id="logo-main">Title</div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
        </div>

        <div id="content-main">

            <div id="search-main">
                <div id="category-search">
                    <i id="hamburger-icon" class="fa fa-bars"></i>
                    <input type="text" placeholder="auto loans" />
                    <i id="search-icon" class="fa fa-search"></i>
                </div>
            </div>

            <div id="page-content">
                <img id="home-img" src="home-page.png" /> /* temp */
            </div>

        </div>
    </div>
</body>

CSS与我正在尝试做的相关：

* {

    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

html, body {

    margin: 10px;
    padding: 0;
    background: #ccc;
    overflow: hidden;
}

#ipad {

    padding: 0;
    margin: 0;
    width: 768px;
    height: 1024px;
    background: #fff;
    overflow: hidden;
}

#content-main {

    width: 600px;
    height: 100%;
    float: right;
    overflow: auto;
}

我见过这个“解决方案”，但它对我不起作用：http://jsfiddle.net/5GCsJ/954/

我已经看到了这一点但是这些在应用于我的#content-main div时无效：http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx

非常感谢任何帮助。

Answer 1

我已经分别为两个div提供了CSS＃content-main div，可以独立于每个其他div进行滚动。并且应该在＃content-main div开始之前关闭#ipad div的DIV。这是你想要的代码。

<body>
<div id="ipad"> 
    <div id="sidebar-main">
        <div id="logo-main">Title</div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
    </div>
</div>
    <div id="content-main">
        <div id="search-main">
            <div id="category-search">
                <i id="hamburger-icon" class="fa fa-bars"></i>
                <input type="text" placeholder="auto loans" />
                <i id="search-icon" class="fa fa-search"></i>
            </div>
        </div>
        <div id="page-content">
            <img id="home-img" src="home-page.png" /> /* temp */
        </div>
    </div>

<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
 width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}

html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>

垂直滚动但删除滚动条

1 个答案: