分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

css高度填充剩余空间

发布时间:2023-09-06 02:12责任编辑:苏小强关键词:暂无标签

<div id="main">

    <div id="nav">nav</div>
    <div id="content">content</div>
</div>
1.浮动特性(浮动元素部分脱离文档流:位置高于常规文档)
#main {
    background-color: #999;
    height: 100%;
}
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}
2.绝对定位 (盒模型)
#main {
       position: relative;
    background-color#999;
    height100%;
}

#nav {
???background-color: #85d989;
???width: 100%;
???height: 50px;
}
#content {
???background-color: #cc85d9;
???width: 100%;
???position: absolute;
???top: 50px;
???bottom: 0px;
???left: 0px;
}

3.js动态设置剩余高度
获取main、nav高度,相减的content高度

css高度填充剩余空间

原文地址:https://www.cnblogs.com/justSmile2/p/9556618.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved