问题描述
- html+css布局问题请教各位
-
这是我的css文件label{ font-size: 16px; } .titleBar{ background: none repeat scroll 0 0 #F8F8F8; border-bottom: 1px solid #F0F0F0; height: 48px; } .imgcontent{ height: 36px; left: 10px; position: relative; top: 10px; width: 36px; } .panSelect{ width:140px; } .selectFL{ float:right; margin: 10px; } .btnSC{ margin-left: 10px; margin-top: 3px; } .content-head{ } .content-body{ position: absolute; top:85px; bottom:10px; height:83%; width: 100%; } .content-main{ width:98%; height:98%; margin:auto; border:1px solid gray; } jsp文件： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在此处插入标题</title> <link href="${ctx }/cys/tmgl/css/tmsc.css" rel="stylesheet" style="text/css"> <script type="text/javascript" src="${ctx}/cys/tmgl/js/tmsc.js"></script> </head> <body id = "body"> <div class = "content-head"> <div class = "titleBar"> <div style = "float: left;"> <img src = "${ctx}/images/lxsq.PNG" class = "imgcontent"></img> <h4 class = "font_head h4domsc">条码生成</h4> </div> <div class = "selectFL"> <label>所属分类：</label> <select id = "panSelect" class = "panSelect"></select> </div> </div> <div class = "btnSC"> <a href = "javaScript:void(0)" class = "webbtn" id = "btn_sc"><span class = "ico_btn_add"></span><span>生成</span></a> </div> </div> <div class = "content-body" id = "content-body"> <div class = "content-main"> </div> </div> </body> </html>现在就是在浏览器最大化的时候边框是好的，但是当缩小浏览器的时候就回出现一个垂直滚动条，怎样能够能垂直滚动调出现呢，并不是overflow做调整，让下方的div能够随着窗体的变化而变化
解决方案
需要用js来动态计算高度。。而不是自指定高度83%
<script>
window.onresize = function () {
var d = document.getElementById('content-body');
d.style.height = Math.max(document.body.clientHeight, document.documentElement.clientHeight) - 84 + 'px';
}
window.onresize()
</script>
解决方案二：
html+css----css布局方式
HTML- css多列布局
html css 布局心得
解决方案三：
html+css----css布局方式
HTML- css多列布局
html css 布局心得
解决方案四：
最外层的div设置一个固定的宽度试一下呢
解决方案五：
有一个叫scrolling的属性框架中滚动条的显示方式 然后属性为no
时间： 2024-11-05 19:44:47