html - 在 HTML 中定位具有独立溢出的多个部分

Question

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

我的问题是，我似乎无法弄清楚如何对这些部分进行排序和定位，以免它们相互重叠或溢出无法按预期工作。基本上，我希望页脚只占据它需要的空间，但始终限制在屏幕底部。其他两个部分应该分别占据页面其余部分的 50%。页面本身永远不需要滚动条 - 而是两个部分各有一个滚动条，因为它们的内容各不相同并且可能溢出。

我尝试过许多不同的解决方案，但这里有一个关于我一直在使用的简化示例:

Very quick mock up

<div id="page" style="position:relative; margin-top:45px">
    <div id="wrapper" style="height:100%; margin-bottom:3.5em">
        <div id="block-a" style="height:50%; overflow: auto; padding:0; position:relative">
            <h2>...</h2>
            <br/>
            <div id="dynamicGrid"></div>
            <br/>
            <button>...</button>
        </div>
        <div id="block-b" style="height:50%; padding:0; position:relative"> 
            <div style="padding-bottom:0">
                <ul id="listHeader">
                    <li id="header">...</li>
                    <li  id="addNew">
                        <a>...</a>
                    </li>
                </ul>
            </div>
            <div id="listSection" style="overflow: auto"> 
                <ul id="list"></ul>
            </div>
        </div>
    </div>
    <div id="footer" style="position:fixed; left:0; right:0; bottom:0">
        <ul> 
            <li>
                <label>...</label>
                <label>...</label>
                <label>...</label>
            </li>
        </ul>  
    </div>
</div>

“页面”div 相对于主体定位，还包含标题(距顶部 45 像素)。 id为'list'的列表是动态获取列表元素的列表，div'dynamicGrid'包含了一堆selects，inputs和labels。div 'listSection' 是我想要独立溢出的内容，'block a' 也是如此。

我一直遇到的一个大问题是我似乎无法定义创建页脚后留下的空间。理论上我想要像 height:100%-sizeOf(footer)...

还有一个重要的规则，就是这个页面必须在大多数主要浏览器中工作，并且必须在不同的屏幕尺寸上“工作”(我想避免使用过多的 px，而是 %)

现在我使用内联 html 样式，但使用 CSS 的答案也很好。我使用 JavaScript 和 Jquery 来控制页面，但布局应该使用 html 设置。

Answer 1

有两种方法:

• JavaScript/jQuery
• 纯 CSS(使用 vh，但对 IE 的支持很粗略)

---

方法一

JavaScript/jQuery

看看这个 JSFiddle

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

这是 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有滚动条并且没有调整大小，或者它们的内容重叠:

#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;
}

---

方法二

纯 CSS ( vh )

您也可以使用视口(viewport)单位(相对于视口(viewport)设置大小)，但是 IE support粗略的

这是一个JSFiddle

它使用以下 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代表 Viewport H8(您也可以使用 vw 表示 Viewport Width)。这些单位加起来必须等于 <或 ==至 100 .

• 在这种情况下每个 .block是45vh , 有 2 个 block 所以 45 * 2是90
• #footer是10vh

90vh + 10vh是100vh ，这意味着页面永远不会大于视口(viewport)。