1. ホーム
  2. 質問と答え
  3. ブートストラップでdivの高さを調整する方法

ブートストラップでdivの高さを調整する方法

2016-12-27 9 views
0

私はbootstrapとcssに新規ですが、インターネット上のコードではwelcome.jspページを作成できました。ブートストラップでdivの高さを調整する方法

私がしたいこと 私の主なコンテンツのdivは、ヘッダーとフッターの間に入れたかったです。また、フッターを固定したいと思っていました。

達成したこと ヘッダーとフッターの間にメインdivを作成できました。私は私のChromeブラウザのズームを削減する場合、メインのdivの高さは、メインのdivとフッターの間の不要な空白を残して、シュリンク取得

問題。

私は、メインのdivとフッターの間の余分なスペースを必要としない縮小ズーム enter image description here

<%@ 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>

enter image description here

任意のズームなし。私はそうすることができる方法はありますか？

出典

2016-12-27 JPG

答えて

1

height:100vh;と#mainの要素でこれを達成できるはずです。

出典

2016-12-27 20:03:51

0

だけ相対的に固定されて変更します。

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

出典

2016-12-27 20:04:36 DCR

-1

あなたはあなたからの高さの値を取得する必要がありますことを修正するために

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

出典

2016-12-27 20:04:58 tomepejo

0

にご#mainのdivのスタイルを変更する必要があります画面を動的に表示します。

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

関連する問題

 関連する問題