如何使用Bootstrap在兩個div之間調整div高度

我是bootstrap和css的新手，但通過互聯網上的一些代碼，我可以創建我的welcome.jsp頁面。如何使用Bootstrap在兩個div之間調整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和頁腳之間的額外空間。有什麼辦法可以這樣做嗎？

來源

2016-12-27 JPG

你應該可以在#main元素上使用height:100vh;來實現。

來源

2016-12-27 20:03:51

只是改到相對：

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

來源

2016-12-27 20:04:36 DCR

-1

您需要更改樣式爲您#main div來

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

來源

2016-12-27 20:04:58 tomepejo

爲了解決這個問題，你需要從得到高度重視您的動態屏幕。

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

來源

2016-12-27 20:59:41

如何使用Bootstrap在兩個div之間調整div高度

回答

相關問題