Question

这是我创建的http://jsfiddle.net/ZygnV/

    <html>
    <head>
        <style type="text/css">
            html, body{
                margin: 0;
                padding: 0;
                height: 100%; 
            }
            .main-content-wrapper{
                height: 100%;
                overflow-y: hidden; 
                white-space: nowrap;
            }
            .main-sidebar{
                display: inline-block;
                height: 100%;
                width: 220px;
                background-color: rgb(0,0,0);
            }
            .main-content{
                display: inline-block;
                height: 100%;
                width: 10000px;
            }
        </style>
    </head>
    <body>
        <div class="main-content-wrapper">
            <nav class="main-sidebar">
            </nav><section id="main-content" class="main-content">

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

问题是小垂直滚动：我不想拥有它。

为什么这个小虫子？我该如何解决？我想设置overflow-y：hidden但我不认为这是最好的解决方案：如果我设置一个最小高度然后显示滚动它将始终隐藏（除非我用js脚本行动）

Answer 1

首先不应该有垂直滚动。

背后的原因是nav和section都是display: inline-block，因此代码格式中的空格会影响布局。有various ways to solve the problem，其中一个是在font-size: 0上设置.main-content-wrapper，在孩子身上设置font-size。

JSFiddle

或者，您可以使用不同的方法放置侧边栏和内容，flexible boxes在这种情况下表现非常好。

Answer 2

这可以帮到你

    .main-content {
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 10000px;
   }
   .main-sidebar {
    background-color: #000000;
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 220px;
    }

Answer 3

将overflow:hidden添加到主div

.main-content-wrapper{
            height: 100%;
            white-space: nowrap;
            overflow:hidden
        }

<强> DEMO

水平滚动，高度固定在100％

3 个答案: