Javascript 固定位置流体布局中的边界问题

在流体布局中对齐中间边框的问题。最初，页眉和内容中间的边框很好，但当页面滚动时，内容部分会被调整，边框会错位。有人能解决这个问题吗？如果有解决方案，我已经准备好使用Javascript了

HTML:

---

这里是我的JSFIDLE的链接：

这是因为当内容区域达到最大高度时会出现垂直滚动条

如果必须只在内容部分显示滚动条，则需要javascript来检测何时调整内容的滚动条

将标题+内容放在容器div中，设置其最大高度如何：

.container
{
    overflow: auto;
    max-height: 194px; /* 44px header + max 150px for content */
    border-bottom:1px solid #ccc;
}

html

---

以下是针对您的请求的其他解决方案：

样式表：

<style>
body, p{padding:0; margin:0 auto;}
td p{padding:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px;}
.content{border-bottom:1px solid #ccc; border-top:1px solid #ccc; width:50%; box-sizing:border-box; }
.content div{max-height:150px; height:150px;overflow:auto; padding:10px }
</style>

正文，p{填充：0；边距：0自动；}
td p{填充：12px；字体系列：Arial，Helvetica，无衬线；字体重量：粗体；字体大小：14px；}
.content{边框底部：1px实心#ccc；边框顶部：1px实心#ccc；宽度：50%；框大小：边框框；}
.content div{最大高度：150px；高度：150px；溢出：自动；填充：10px}

HTML代码：

<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr height="40">
<td bgcolor="#eee" width="50%" headers="40" style="border-right:1px solid #ccc;box-sizing:border-box;"><p>First Title</p></td>
<td bgcolor="#eee" width="50%" height="40"><p>Second Title</p></td>
</tr>
<tr>
<td class="content" valign="top" style="border-right:1px solid #ccc; padding:0">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</td>
<td class="content" style="padding:0">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</td>
</tr>
</table>

第一个标题

第二名

这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择。沼泽地不属于戈蒂卡海岸，也不属于克拉拉沼泽地，而是每四分之一和五分之一海水形成的人文景观。Eodem modo typi，nobis videntur parum clari，未来的未婚妻Sollemens。
这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择。沼泽地不属于戈蒂卡海岸，也不属于克拉拉沼泽地，而是每四分之一和五分之一海水形成的人文景观。Eodem modo typi，nobis videntur parum clari，未来的未婚妻Sollemens。

我想你想要

我在你的小提琴上换了些东西。请检查一下这个

---

谢谢。

可能有一种更简单、最好的语义解决方案，即使用表格来处理表格数据

---

否则需要使用一些乏味的javascript

问题是由滚动条引起的

.contentLeft{width:52%；}.contentRight{width:48%；}

，也许这会有帮助！挑战在于，它应该与页面滚动和任何分辨率对齐或不对齐。我可以添加52%，但如果没有页面滚动，问题再次出现谢谢，但是页眉应该是固定的，只有内容部分应该有滚动页眉是固定的位置，有时内容会有更少或更多的文本，但是中间的边框应该与页眉对齐，我已经尝试过了，但是内容应该有一个滚动页眉，不是单独的scrollsFriend，标题中边框和内容中边框应该与滚动条对齐，也可以不与滚动条对齐。当前，页面滚动拉拽流体布局并导致对齐问题。在各种分辨率/大小调整中没有对齐，并且布局中没有使用像素值。调整屏幕大小时，您的黑色边框正在移动。我使用了表格，但有两个滚动条，您有任何示例吗？

<div class="scroll"><div class="header">
    <div class="hdrSectionleft"><p>First Title</p></div>
    <div class="hdrSectionright"><p>Second Title</p></div>
</div>
<div class="content">
    <div class="contentLeft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
    <div class="contentRight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
</div>
</div>

body, p{padding:0; margin:0;}
.header{Position:fixed; top:50px; display:block; width:100%; height:40px; background-color:#eee;z-index: 1;}
.hdrSectionleft{float:left; width:50%; border-right:1px solid #ccc; box-sizing:border-box; height:40px;}
.hdrSectionleft p, .hdrSectionright p{padding:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px;}
.hdrSectionright{float:left; width:50%; height:40px;}

.content{Position:absolute; top:90px; max-height:150px; border-bottom:1px solid #ccc; border-top:1px solid #ccc; width:100%; box-sizing:border-box; 
}


.contentLeft{float:left; width:50%; border-right:1px solid #ccc; box-sizing:border-box; padding:10px;}
.contentRight{float:left; width:50%; padding:10px; box-sizing:border-box;}
.scroll
{overflow:auto;
    max-height:150px;
}

<style>
body, p{padding:0; margin:0 auto;}
td p{padding:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px;}
.content{border-bottom:1px solid #ccc; border-top:1px solid #ccc; width:50%; box-sizing:border-box; }
.content div{max-height:150px; height:150px;overflow:auto; padding:10px }
</style>

<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr height="40">
<td bgcolor="#eee" width="50%" headers="40" style="border-right:1px solid #ccc;box-sizing:border-box;"><p>First Title</p></td>
<td bgcolor="#eee" width="50%" height="40"><p>Second Title</p></td>
</tr>
<tr>
<td class="content" valign="top" style="border-right:1px solid #ccc; padding:0">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</td>
<td class="content" style="padding:0">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</td>
</tr>
</table>

.header{Position:fixed; margin-top:50px; display:block; width:100%; height:auto; background-color:#eee; }

.content{Position:absolute; top:140px; max-height:150px; border-bottom:1px solid #ccc;   border-top:1px solid #ccc; width:100%; box-sizing:border-box; 
overflow:auto;}