Question

我现在有以下内容，但它并不完美：

$(window).resize(function () {
    $("#app-views").height($(window).height() - 140);
});

基本上，在我的内容开始之前，我从顶部开始有75px，而且从页面底部到我的内容我有60px。

当我调整窗口大小时，如何实现它，它将始终尊重这些尺寸？我正在使用malihu滚动条，我正在将我的视图加载到＃app-views。

我的窗户周围有一个边框（10px），一个导航栏（50px）和15px的填充，直到我的身体。然后，我在身体上有15px的底部填充，一个高度为35px的底脚和一个10px的底部边框。

这是基本的HTML：

Answer 1

如果您希望放置内容并调整其大小，同时保持与窗口顶部和底部的距离相同，则不必使用jQuery或Javascript。只有CSS可以做到这一点。在样式代码中尝试使用不带height 属性：

#app-views {
    position: fixed;
    top: 75px;
    bottom: 60px
}

您可以设置left和right而不设置width，以在水平维度中获得相同的效果。

Answer 2

您说您有具体的衡量标准来将您的内容放在页面上

（在我的内容开始前从顶部开始75px，我从底部开始有60px 页面）

使用jQuery offset，您可以获得元素的顶部位置，还可以在屏幕调整大小时更新css顶部位置，以便您的内容始终在调整大小时调整其位置。

要查看内容元素底部的位置，您可以找到内容顶部的偏移量，并添加内容的高度以获取相对于页面顶部的内容的底部位置。< / p>

Answer 3

我建议在CSS中执行此操作，可能是通过动态更改jQuery对象的CSS属性。我会用一个简单的CSS选择器来处理它。即使调整窗口大小，这也可以工作。看看：

#('app-views').css('position', 'top');

您可以使用＆＃39; top＆＃39;来调整垂直位置。财产和＆＃39; translateY（）＆＃39;我用transform和translateX（）演示了类似的方式。

如果你想使用jQuery，你可以尝试：

var dataValid = true;
$("#players_form input").each(function(){
    if ($(this).val() == ''){
        dataValid = false;
    }
});

if (dataValid){
   // send data
} else {
   alert('Fill in all the data!');
}

此外，我还建议您不要将75px保留在页面顶部，以适应各种屏幕尺寸。 75px可能适用于台式机，但不适用于移动设备。如果您打算让您的网站完全支持移动设备，那么首先设计移动布局通常是一个好主意，因为它往往更简单。然后，您可以使用媒体查询为桌面调整它。它确实非常出色。我以前曾经多次使用它。您可以在此处了解更多相关信息：

MediaQuery CSS

jquery调整大小以使内容始终完美居中

3 个答案: