Jquery 为什么相同部分的高度不同?

Jquery 为什么相同部分的高度不同?,jquery,css,height,Jquery,Css,Height,我有一个包含4个部分的布局,每个部分包含一个旁白和一个占据一半屏幕的主屏幕。第一节从左侧开始,第二节从左侧开始,每节交替进行。我已经为接下来的每一节制作了前几节html的副本。我使用flex属性“order”来更改aside/main容器的位置。所有应用的css都被均匀地应用于各个部分,因此没有理由任何部分会有所不同。然而,当我使用Jquery的height()方法时,第一个干线高度返回1252(px),而下三个干线高度返回1216。什么可能使第一部分比下面的3部分高 钢笔: //两个函数,一

我有一个包含4个部分的布局,每个部分包含一个旁白和一个占据一半屏幕的主屏幕。第一节从左侧开始,第二节从左侧开始,每节交替进行。我已经为接下来的每一节制作了前几节html的副本。我使用flex属性“order”来更改aside/main容器的位置。所有应用的css都被均匀地应用于各个部分,因此没有理由任何部分会有所不同。然而,当我使用Jquery的height()方法时,第一个干线高度返回1252(px),而下三个干线高度返回1216。什么可能使第一部分比下面的3部分高

钢笔:

//两个函数,一个变为固定
var windw=此;
$.fn.startFixed=函数(位置){
var$this=这个,
$window=$(windw);
$window.scroll(功能(e){
如果($window.scrollTop()>pos){
$this.css({
位置:'固定',
顶部:pos
});
}否则{
$this.css({
位置:'绝对',
顶部:位置+200
});
}
});
};
//这个变为绝对
$.fn.followTo=函数(位置){
var$this=这个,
$window=$(windw);
$window.scroll(功能(e){
如果($window.scrollTop()>pos){
$this.css({
位置:'绝对',
顶部:pos
});
}否则{
$this.css({
位置:'固定',
排名:0
});
}
});
};
//开始点和停止点的一些值
var asideHeight=$(“.aside”).height();
var stopPoint=asideHeight-303;
var viewPortHeight=$(窗口).height();
$('.container text')。followTo(停止点);
//试图将jquery对象放入变量中,但在控制台中返回时未定义
var firstPos=$(“.container text”).position();
var firstPosAt=$(“.container text”).css('position');
var secondPos=$(“#第2节”).position();
var secondPosAt=$(“第2节”).css(“位置”);
var thirdPos=$(“#第3节”).position();
var thirdPosAt=$(“第3节”).css(“位置”);
var lastPos=$(“#lastfix”).position();
var lastPosAt=$(“#lastfix”).css('position');
var secHeight=$(“#main2”).height();
var secHeight1=$(“.main”).height();
//第一节高度=1252
控制台日志(secHeight1);
//第二个和后面的2=1216。。。为什么?
控制台日志(secHeight);
控制台日志(firstPos);
console.log(firstPosAt);
控制台日志(secondPos);
console.log(secondPosAt);
console.log(thirdPos);
控制台日志(thirdPosAt);
控制台日志(lastPos);
console.log(lastPosAt)
*{
框大小:边框框;
保证金:0;
}
部分{
宽度:100%;
保证金:自动;
显示器:flex;
背景:灰色;
}
截面:第n个子(偶数)主{
顺序:-1;
}
别说了,梅因{
弹性:1050%;
}
旁白{
弹性:0.50%;
证明内容:中心;
背景:#eee;
}
主要{
位置:相对位置;
颜色:白色;
}
旁白{
填充:.5em;
}
.容器内容{
显示器:flex;
弯曲方向:立柱;
证明内容:中心;
对齐项目:居中;
}
文章{
宽度:75%;
利润率:75px;
}
.容器文本{
位置:固定;
}
#第2节{
位置:绝对位置;
}
#第三节{
位置:绝对位置;
}
#最后固定{
位置:绝对位置;
}

你好
如何

are

第一标题 Lorem ipsum dolor sit amet,是一位杰出的献身者。猪矢状体悬液,一种牛矢状体悬液。乌尔特里奇斯牛亚姆sagittis enim sapien,在乌尔特里奇斯牛亚姆sagittis enim sapien中。无便利。Ut mattis孕妇semper。Nam nec lacinia nulla。Proin euismod dolor lacus,id sagittis sem viverra accumsan。库拉比图尔·厄洛斯·伊斯特(Curabitur eros est)、车辆层、孕妇门或turpis。万岁。 第二标题 Lorem ipsum dolor sit amet,是一位杰出的献身者。猪矢状体悬液,一种牛矢状体悬液。乌尔特里奇斯牛亚姆sagittis enim sapien,在乌尔特里奇斯牛亚姆sagittis enim sapien中。无便利。Ut mattis孕妇semper。Nam nec lacinia nulla。Proin euismod dolor lacus,id sagittis sem viverra accumsan。库拉比图尔·厄洛斯·伊斯特(Curabitur eros est)、车辆层、孕妇门或turpis。万岁。位于无设施区的人马座。乌尔特里奇斯牛亚姆sagittis enim sapien,在乌尔特里奇斯牛亚姆sagittis enim sapien中。无便利。 第三标题 Lorem ipsum dolor sit amet,是一位杰出的献身者。猪矢状体悬液,一种牛矢状体悬液。乌尔特里奇斯牛亚姆sagittis enim sapien,在乌尔特里奇斯牛亚姆sagittis enim sapien中。无便利。Ut mattis孕妇semper。Nam nec lacinia nulla。Proin euismod dolor lacus,id sagittis sem viverra accumsan。库拉比图尔·厄洛斯·伊斯特(Curabitur eros est)、车辆层、孕妇门或turpis。万岁。 第四标题 Lorem ipsum dolor sit amet,是一位杰出的献身者。猪矢状体悬液,一种牛矢状体悬液。乌尔特里奇斯牛亚姆sagittis enim sapien,在乌尔特里奇斯牛亚姆sagittis enim sapien中。无便利。Ut mattis孕妇semper。Nam nec lacinia nulla。Proin euismod dolor lacus,id sagittis sem viverra accumsan。库拉比图尔·厄洛斯·伊斯特(Curabitur eros est)、车辆层、孕妇门或turpis。万岁。

你好

如何

are

第一标题 Lorem ipsum dolor sit amet,是一位杰出的献身者。猪矢状体悬液,一种牛矢状体悬液。Eti
<article>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi.
</article>
<article>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>