无js实现div高度自适应布局
之前在项目发现写了好几行js就是为了控制div布局中的宽度和高度，让嵌套的iframe能够自动填满剩余的空间。这就让我很不爽了。因为我一直觉得这个工作应该交给css才对啊。于是尝试着不用js来完成这个工作。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div布局</title> <style type="text/css"> *{margin:0;padding:0;} html, body { height: 100%;/*html,body 高度设置100%，不然body内部元素高度设置100%是无效的*/ } .header { height: 100%; /*头部高度也设置成100%，不要急*/ margin-bottom: -30px;/*边框底部设置负的30px，这是用来留给footer的高度 =footer.height*/ } /*真正的头部header*/ .nav { height: 80px; background: #999; } .footer { height: 30px;/*设置footer的高度*/ background: #999; } /*主体内容设置绝对定位 top是头部的高度