在HTML中定位具有独立溢出的多个节

我正在构建一个包含多个不同部分的页面，这些部分都会动态更改内容，但我希望它们的大小是固定的，并且在出现溢出时显示一个滚动条（仅针对该部分）。 实际上，我有三个主要部分（div）；其中两个应该满足固定大小和溢出属性，另一个作为页脚，应该固定在屏幕底部，并且永远不会改变大小

我的问题是，我似乎不知道如何排序和定位这些部分，而不让它们彼此重叠，或者溢出无法按预期工作。 基本上，我希望页脚只占据它需要的空间，但总是被限制在屏幕底部。然后，其他两个部分应分别占据页面其余部分的50%。页面本身不需要滚动条，而是两个部分各需要一个滚动条，因为它们的内容不同，可能会溢出

我尝试过许多不同的解决方案，但下面是一个简单的例子，说明我一直在使用的方法：

...




...



...





...
...
...

“page”div相对于主体定位，还包含标题（距顶部45像素）。id为“list”的列表是动态获取列表元素的列表，div“dynamicGrid”包含一组选择、输入和标签。 div'listSection'是我想要独立溢出的，这也是'block a'的情况

我经常遇到的一个大问题是，我似乎无法定义创建页脚后留下的空间。理论上我想要的是身高：100%-sizeOf（页脚）

还有一条重要的规则，就是这个页面必须在大多数主流浏览器中工作，并且必须在不同的屏幕大小上“工作”（我想避免过多地使用px，但实际上是%）

现在我使用内联html样式，但是使用CSS也可以。

---

我使用JavaScript和Jquery控制页面，但布局应使用html设置。

有两种方法：

• JavaScript/jQuery
• 普通CSS（使用

  vh

  ，但IE支持很粗略）

---

方法1 JavaScript/jQuery 看看这个

基本上，它使用jQuery来计算主体的高度并删除页脚的高度，然后将其除以2得到每个块的高度

以下是JavaScript/jQuery代码：

// Set the height of the #page element to be the full height of the window
$('#page').height($(window).height() + 'px')

// Save page height
var page_height = $('#page').height()

// Save page height - footer height
var height_without_footer = page_height - $('#footer').height()

// Calculate the size of each block
var block_height = height_without_footer / 2

// Set each block height
$('.block').css('height', block_height + 'px')

这里是我使用的CSS（它几乎就是您所拥有的，只是在样式表中，而不是内联）。我唯一更改的是添加了

overflow:scroll

，以确保

.block

s具有滚动条并且没有调整大小，或者它们的内容重叠：

#footer {
    background-color: #000;
    color: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.block {
    overflow: scroll;
    padding: 5px;
}

/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
    margin: 0;
}

---

方法2 普通CSS（

vh

） 您也可以使用视口单位（相对于视口设置大小），但它是粗略的

这是一个

它使用以下CSS：

#footer {
    background-color: #000;
    color: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vh;
}

.block {
    overflow: scroll;
    padding: 5px;
    height: 45vh;
}

/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
    margin: 0;
}

---

vh

表示ViewportH8（您也可以使用

vw

表示ViewportWidth）。这些单位加起来必须是

这就是你要找的吗？在
vw
单元中使用宽度，使其适应任何视口宽度。可以使用jQuery动态计算和分配高度


$（文档）.ready（函数（）{
var windowHeight=$（window.height（）；
var footerHeight=$（'#footer'）.height（）；
$（“#容器”）.height（（windowHeight-footerHeight）+“px”）；
$（'容器1'）。高度（（窗口高度-页脚高度）/2+'像素'）；
$（“#container2'）。高度（（窗口高度-页脚高度）/2+“px”）；
});
正文{
边际：0px；
填充：0px；
}
#页脚{
位置：绝对位置；
宽度：100vw；
高度：自动；
底部：0；
背景：#ccc；
}
#容器{
职位：房地产；
}
#集装箱1{
宽度：100vw；
背景#f1f1；
溢出：滚动；
}
#集装箱2{
宽度：100vw；
背景：#444；
颜色：白色；
溢出：滚动；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德·乌兰科珀、努克·ac·亨德雷特·因普雷特、里苏斯和发酵酒后驾车、奥纳雷·洛雷姆·胡斯托·因普雷特。前庭前体。潜力悬钩子。埃尼安欧盟精英亨德雷特，塞姆佩尔·萨皮恩
nec，尊贵的洛雷姆。奎斯克·乌尔纳·安特、亨德雷特·塞德·厄洛斯·阿瑟、维韦拉·马萨。这是一个很好的例子。这是一个非常好的例子。这是一个很有说服力的拍卖人。杜内克乌兰科珀酒店
弗林吉利亚草。nisl前庭中的Morbi dapibus lorem，以及矢状体中的Pat tristique urna sagittis。Nunc id调味品sem。做枕前庭痉挛。Vivamus坐在amet orci ante。Donec pulvinar，interdum feugiat的自由人，neque turpis，
维内纳提斯·马克西姆斯·安特·内克·奥古斯。一只亨德雷特猫，塞德·莫利斯·努拉。发酵剂是一种发酵剂。非奥迪奥莫利斯酒店。整只雌蜥蜴。佩伦茨克
利奥的权杖。这是一个很好的例子。亨德雷特的福斯·苏西比特·ac·利奥。这是一只猫。在奎斯奥奇农克。不要威胁我。Vivamus mauris sem，porta的dapibus
维韦拉，马蒂斯·奥勒姆。紧急情况下的紧急情况。在弗林尼利亚·莫里斯，在威尼斯的乌尔纳元素。
洛雷姆ips
#footer {
    background-color: #000;
    color: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vh;
}

.block {
    overflow: scroll;
    padding: 5px;
    height: 45vh;
}

/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
    margin: 0;
}