1

我已经阅读了几篇关于使用 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;}

现在我知道了一个固定头部的解决方案，固定底部不使用固定位置，但在有人开枪之前，我正在寻找一个扩展版本，它将支持我稍后将解释的更多内容。

这对我来说是复杂的或最少的

基本上我想要一个 jQuery 脚本，它会根据浏览器窗口的大小更新高度，这样只有一个内容 div 是可见的，所以想想 3 种颜色，当你向下滚动时，你会得到另一种颜色，但我想要它的方式只有 1是永远可见的，这可以通过偏移和使用我非常了解的名称来完成，但这不会调整窗口大小，因此只有一个元素是可见的。

我已经编译了一些图像，希望这可以解释我在多一点之后......

幻灯片示例 1

考虑到上图和文本形式的以下内容

  • 标题始终可见
  • 内部内容将随浏览器调整大小
  • 即使滚动，导航链接也将始终可见
  • 页脚始终可见

幻灯片的另一个例子

幻灯片示例 2

从上图中可以看出，内容会滑动，但最重要的是会调整大小，并且使用 go to 和 100% 高度只会显示一张幻灯片。

宽度和高度变化

如果您愿意让用户滚动并裁剪内容，但内容很轻，并且只有一张可见的幻灯片可以很好地工作，那么很容易提出解决方案。

理解

我知道在某些时候中间的内容会变得太小以至于无法正确呈现，这没问题，当它使用媒体查询达到 X 宽度时我会关闭该功能，我感谢每个为以任何形式提供帮助，对不起，如果它是 jQuery 前面的一个小板，这不是我的强项，我希望有人可以将 jFiddle 或类似的东西组合在一起，或者为我指明已经做出的方向。

可能有一个更简单的方法来解决这个问题，比如使用最小高度，任何工作方法都值得赞赏。PS对于所有帖子的庞大，这不是我的意图;）

4

1 回答 1

1

我想你想要这样的东西

只有内容应该滚动

JS小提琴

您可以在调整大小时为 div 提供 min-height

$('.container').css("min-height", '250px');
于 2014-09-23T06:47:40.887 回答