Question

我已经阅读了几篇关于使用jQuery根据浏览器窗口大小调整来改变高度的帖子，其中包括观察窗口大小然后更新“内联”。从宽度尺寸制定的新高度的样式。然而，所有发现的解决方案都不起作用，因为我需要类似但不相同的东西，基本上我想要一个内部元素调整大小，遗憾的是内容不是图像，因为这会更容易并且保存我写这篇文章。

因此，您希望看到的HTML代码如下所示：

<header> </header>
<div class="mainbox">
    <div class="custombar"> </div>
    <div class="contentContainer">
        <div class="contentOne"> </div>
        <div class="contentTwo"> </div>
        <div class="ContentThree"> </div>
    </div>
    <div class="contentFooter">
        <ul>
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
        </ul>
    </div>
</div>
<footer> </footer>

CSS类似于：

.header{height:135px;width:100%;background:#000;}
.mainbox{width:100%;height:500px;background:#ccc;}
.footer{height:135px;width:100%;background:#000;}

现在我已经意识到固定头的解决方案，固定底部没有使用固定的位置但在有人跳枪之前我正在寻找一个扩展版本，它将支持更多我和我＃39;稍后解释一下。

这是我变得复杂或最不重要的地方

Basiclly我想要一个jQuery脚本，它将根据浏览器窗口的大小更新高度，以便只有一个内容div可见，所以想想3种颜色，当你向下滚动你得到另一个但我想要它的方式所以只有1可见，这可以通过偏移和使用我知道的名字来完成，但这不会调整窗口的大小，以便只有一个元素可见。

我编写了一些图片，希望这可以解释一下我之后会有什么......

Slide Example 1

从上面的图像和文本形式考虑以下内容

标题始终可见
内部内容将使用浏览器调整大小
即使滚动
页脚始终可见

幻灯片的另一个例子

Slide Example 2

从上图中可以看出，内容会滑动，但最重要的是调整尺寸，使用转到和100％高度只会出现一张幻灯片。

宽度和高度变化

如果您愿意让用户滚动并让内容裁剪但内容很轻，并且只能看到1张幻灯片，那么很容易提出解决方案。

了解

我知道在某些时候中间的内容会变得很小，以至于无法正确呈现，这没有问题，当我使用媒体查询达到X宽度时我会转向该功能，我感谢所有有助于提供各种形式的人，如果它在jQuery前面有一个小板子，那就不是我的强项了，我希望有人可以在一个小伙伴或类似的人身上或者指向我已经做出的方向。

对于像使用min-height这样的问题，可能有一种更简单的方法，任何工作方法都值得赞赏。 PS对于所有帖子的猛犸象，这不是我的意图;）

Answer 1

我想你想要这样的东西

只有内容应滚动

JS Fiddle

你可以在调整大小时给出div的最小高度

$('.container').css("min-height", '250px');

jQuery可变宽度到高度调整与自定义滚动条

1 个答案: