Question

我是bootstrap和css的新用户，但是通过互联网上的一些代码，我可以创建我的welcome.jsp页面。

我想做什么 我希望我的主要内容div在页眉和页脚之间。我也希望页脚处于固定位置。

我取得的成就 我能够在页眉和页脚之间创建主div。

问题当我减少我的Chrome浏览器的缩放时，主div高度会缩小，在主div和页脚之间留下不必要的空白。

没有任何缩放

缩小缩放

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
#footer {
position:fixed;
height: 20px;
bottom: 0;
width: 100%;
background-color: green;
}
#main{
margin-top:-10px;
border-radius: 8px;
border: 1px solid #73AD21;
height: 550px;

}
</style>
<script src="../jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<link  href="../bootstrap/bootstrap.min.css"  rel="stylesheet" >
<script>
$(document).ready(function(){
    $("#header").load("header/header.jsp");

});
</script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div id="header"></div>
</div>
</div>
<div class="row">
<div class="container-fluid" >
<div class="col-xs-12">
<div id="main">CONTENT<br></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>

我不希望主div和页脚之间有多余的空间。我有什么方法可以这样做吗？

Answer 1

您应该可以使用height:100vh;元素上的#main来实现此目的。

Answer 2

只需将其修改为相对：

<style>
#footer {
position:relative;
height: 20px;
bottom: 0;
width: 100%;
background-color: green;
}

Answer 3

为了解决这个问题，您需要动态地从屏幕上获取高度值。

var content = document.getElementsByTagName("content")[0];
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var newValue=x-300;
console.log(x, newValue)
content.style.height=newValue+'px';

样品： Codepen link

Answer 4

您需要将#main div的样式更改为

#mein {
  width: 100%;
  position: absolute;
  top:70px;
  bottom: 0px;
  overflow: auto;
}

如何使用Bootstrap在两个div之间调整div高度

4 个答案: