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

Question

    <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 ，因此代码格式中的空格会影响布局。 解决问题的方法有多种，其中一种方法是设置font-size: 0 .main-content-wrapper上设置font-size: 0在.main-content-wrapper上.main-content-wrapper所需的font-size 。

JSFiddle 。

另外，您可以使用其他方法放置侧边栏和内容，在这种情况下，灵活框的效果非常好。

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 个解决方案

解决方案1
3 2014-01-02 10:06:13

解决方案2
1 2014-01-02 10:21:54

解决方案3
0 2014-01-02 10:04:36

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

问题描述

3 个解决方案

解决方案1 3 2014-01-02 10:06:13

解决方案2 1 2014-01-02 10:21:54

解决方案3 0 2014-01-02 10:04:36

解决方案1
3 2014-01-02 10:06:13

解决方案2
1 2014-01-02 10:21:54

解决方案3
0 2014-01-02 10:04:36