Question

https://jsfiddle.net/537wen91/

我正在使用Bootstrap，在示例中，如果你使html视图宽，滚动条消失，当视图显示为窄滚动条时。这就是我想要的。当我处于“狭窄视图”时，问题就开始了：向下滚动到灰色框，现在展开html视图，看看滚动条是如何消失的（好），但我也丢失了我的文本在顶部（不好）。为什么我的文字在顶部消失了？

编辑澄清

这种方式有效：在页面加载时 - 不要在任何地方滚动并拉伸屏幕，以便在一行中看到所有彩色列。您会在顶部看到一些文本，在底部看到列，没有滚动条。这应该是这样的。

这样做不会：刷新页面。向下滚动到粉红色列。现在拉伸它，使所有彩色列出现在一行上。看到我顶部的文字消失了吗？为什么呢？

如果仍然不清楚，我将不得不进行屏幕录制......

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
             <h2>title</h2>

        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>bbb</p>
        </div>
        <div class="col-md-2">
             <h2>title</h2>

            <p>bbb</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
             <h2>title</h2>

        </div>
    </div>
    <div id="see" class="row">
        <div class="col-md-2" style="background-color: #FFC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #FC9;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
    </div>
</div>
<nav class="navbar navbar-fixed-bottom">
    <p>Place sticky footer content here.</p>
</nav>

CSS

html {
    /*position: relative;
    min-height: 100%;*/
    height: 100%;
}
body {
    overflow: hidden;
}
#see > div {
    height: 1200px;
}
.navbar {
    margin-bottom: 0;
    min-height: inherit;
}
nav {
    background-color: #222;
    color: #666;
}
@media (max-width: 992px) {
    body {
        overflow: auto;
    }
    #see > div {
        height: 500px;
    }
}

JS

$(window).bind('resize load', function () {
    if ($(this).width() <= 992) {
        $('nav').removeClass('navbar-fixed-bottom');
    } else {
        $('nav').addClass('navbar-fixed-bottom');
    }
});

Answer 1

如上所述，问题是#see div更改了宽度而不是高度，并且当页面滚动时，滚动仍然是，将文本留在视口之外。这样的事情（原谅我糟糕的MSPaint技能）：

enter image description here

一种可能的解决方案是在进行更改之前滚动到页面顶部，这样文本始终可见。您只需添加一行代码即可实现此目的：

$(window).scrollTop(0);

您可以在此处看到它：https://jsfiddle.net/537wen91/12/

一种可能的纯CSS解决方案是，如果文本高度不变，#see div添加calc(100% - HEIGHT_OF_TEXT)的高度。但我没试过这个。

Answer 2

尝试更换：

body { overflow: hidden; }

带

body { overflow: auto; }

有关溢出值的更多信息：http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 3

您可能需要使用Bootstrap的网格布局来定义不同视图大小的内容：http://getbootstrap.com/css/#grid
在您的班级中，为这些定义网格大小： .col-xs- .col-sm- .col-md- .col-lg -

将隐藏的xs添加到你的类中以隐藏在中等视图中的超小或隐藏的md等等（在下面的小提琴中，如果你使结果窗口的宽度足够窄，你会看到这个发生了，

当你选择较小的屏幕尺寸时，让我们说你要显示两个＆＃34;标题＆＃34;元素而不是四个，您可以将HTML更改为：

<div class="row">
   <div class="hidden-xs col-md-2">
   <div class="col-xs-6 col-md-4">
   <div class="col-xs-6 col-md-4">
   <div class="hidden-xs col-md-2">
</div>

这样可以在较小的屏幕上显示唯一的中间两个元素，因为它们将占据网格的所有12列。或者你可以在较小的视图上做到这一点。这是一个小提琴：https://jsfiddle.net/1dtnd59s/1/

基本上，必须调整不同显示尺寸的列选项，如果您可以将某些元素隐藏在小显示屏上，这将使其更容易。

Bootstrap - 搞砸了@media和溢出问题

3 个答案: