gpt4 book ai didi

html - 创建跨浏览器的固定高度可滚动显示 : table-row

转载 作者:太空宇宙 更新时间:2023-11-03 17:31:57 25 4
gpt4 key购买 nike

我正在尝试创建一个高度为页面高度 80% 的容器,它具有固定高度的页眉和页脚,以及一个可拉伸(stretch)以适应剩余可用空间的内容 Pane 。

我尝试使用 display: table 布局如下:

<body>
<div class="ticket">
<div class="header">header</div>
<div class="body">
<div class="wrapper">
<div class="content">content</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>

有了这些风格

  body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.ticket {
background: #ccc;
width: 600px;
margin: 0 auto;
height: 80%;
display: table;
}

.header {
background: blue;
height: 36px;
display: table-row;
}

.body {
background: orange;
display: table-row;
}

.wrapper {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

.content {
height: 600px;
}

.footer {
background: green;
height: 72px;
display: table-row;
}

在 Chrome 中,这给了我一个可滚动的中间面板,它随着容器的高度而增长:

不幸的是,这在 IE8 或 Firefox 中不起作用,“.body”div 会拉伸(stretch)以适应“.content”。

有没有一种方法可以跨浏览器和 IE8+ 运行?

最佳答案

查看 http://caniuse.com/#search=flexbox和/或 http://caniuse.com/#search=vh

这些是获取它的方法,但它们都不适用于 IE 8。你必须使用 JS

关于html - 创建跨浏览器的固定高度可滚动显示 : table-row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30371288/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com