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能够随着窗体的变化而变化

3个回答

需要用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>

最外层的div设置一个固定的宽度试一下呢

有一个叫scrolling的属性框架中滚动条的显示方式 然后属性为no

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问