div 横向布局中间高度自适应

最新推荐文章于 2024-07-03 09:36:39 发布

原创最新推荐文章于 2024-07-03 09:36:39 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的网页布局方法，通过自动调整中间内容区域的高度来确保良好的浏览体验。页面由顶部红色头部、黄色中部内容区及蓝色底部构成。中部内容区根据视口高度自动调整，当内容超出时显示滚动条。

<html>
<div id="header" style="height:100px; background-color:red"></div>
<div id="content" style="overflow-y:auto; background-color: yellow">会自动出现滚动条</div>
<div id="footer" style="height:100px; background-color:blue"></div>
<script type="text/javascript">
function resizeContent(){
    availHeight = parseInt(document.body.clientHeight);
    header_height=parseInt(document.getElementById("header").style.height);
    footer_height=parseInt(document.getElementById("footer").style.height);
    content_height=(availHeight-header_height-footer_height)+"px";
    document.getElementById("content").style.height=content_height;
}
resizeContent();
window.onresize=resizeContent;
</script>
</html>