gpt4 book ai didi

HTML 高度分为两部分,一部分是改变高度,一部分是长且可滚动

转载 作者:行者123 更新时间:2023-11-28 08:26:02 26 4
gpt4 key购买 nike

我试图将页面或页面的一部分分成两部分(高度)。顶部将与其内容高度一样多。底部将是剩余的可用高度(如果需要可滚动)。

我做到了,而且它工作正常,但是 IE(9) 和 firefox 显示得很糟糕:(

也许我一开始的想法是错误的,也许不需要表格..

<table>
<tr>
<td>
Some Content
</td>
</tr>

<tr>
<td style="height:100%">
<div style="overflow: auto;height: 100%;">
more long content (scrollable)
</div>
</td>
</tr>
</table>

Plunkr working demo

请帮忙。

--编辑:

我知道这个问题有一个简单的 javascript 解决方案,但我正在寻找一个纯 css html 解决方案。

最佳答案

好吧,根据您的代码,我认为可滚动意味着仅在第二个 div 内滚动。如果是这样,您可以使用下面的 CSS 将您的页面水平分成两部分:

html, body {
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
.wrapper{
position:relative;
width: 100%;
height: 100%;
}
.header{
position: relative;
height: auto;
width: 100%;
background-color: lightblue;
}
.body{
position: relative;
width: 100%;
height: 100%;
background-color: lightgreen;
}

然后让你的第二个内容总是填充剩余高度,你可以使用下面的JS:

function resize() {
document.getElementById('body').style.height = '100%';
var height = document.getElementById('body').offsetHeight - document.getElementById('header').offsetHeight;
document.getElementById('body').style.height = height + 'px';
};
window.onresize = function(event) {
resize();
};
window.onload = function(event){
resize();
}

使用以下 HTML:

<body onload="resize()">
<div class="header" id="header">
HEADER
</div>
<div class="body" id="body">
<div style="overflow: auto;height: 100%;">
test<br />
test<br />
//it will be scrollable when the content's height > the parent div
</div>
</div>
</body>

检查这个 Fiddle了解更多信息..

关于HTML 高度分为两部分,一部分是改变高度,一部分是长且可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28526718/

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