15
레이아웃에 문제가 있습니다. 온라인이 아니어도 로컬이지만, 아래 코드를 복사하여 HTML 페이지에 붙여넣고 로컬로 실행하면 내가하는 같은 페이지.고정 된 바닥 글 및 포함 된 Google지도가있는 100 % 높이
아주 가깝습니다. 달성하기 위해 노력하고있는 것은 모든 사용 가능한 수직 공간을 사용하는 스크롤바가없는 페이지입니다. 네, 컨테이너 선언에 "overflow : hidden"을 설정할 수 있습니다.하지만 도움이 되긴하지만 맞지 않습니다. 나는 1em 경계에 둘러싸이고있는 google지도를 실제로 가지고 있고 싶다. 나는 3면이 있지만 콘텐츠 div의 100 % 높이 선언 아래쪽 테두리 충돌합니다. 당신이 백분율 크기 Google지도 div의 연루를 깨닫지 않는 경우에, 부모는 그것이 작동하기 위하여 선언 된 고도가 있어야한다. 꼬리말은 절대적이고 흐름의 바깥에 있으므로 작업 할 "하단"경계가 없으며 레이아웃이 작동하지 않습니다. 내용 div 100 % 높이는 기본적으로 뷰포트에서 크기를 차지하는 것으로 보이지만 포함 된 div는 그렇지 않습니다.
그것은 나를 미치게합니다. 단지 이것을하는 법을 배제하는 것처럼 보이지 않습니다. 그리고 저는 약간의 의견을 정말로 고맙게 생각합니다. 여기
시작 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content
{
float:left;
width:70%;
height:100%; /* fill that hole! */
border-right:1px solid #ccc;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent
{
height:100%;
margin: 1em;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="header2">
<p>Secondary menu...</p>
</div>
<div id="rightCol">
<div id="headerInternal2">
<p>Right Header</p>
</div>
<p class="paddedContent">This is the right column</p>
</div>
<div id="content">
<div id="headerInternal">
<p>Page Context Menu</p>
</div>
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div id="footer">
<p>This footer is absolutely positioned</p>
</div>
</div>
</div>
</body>
</html>
정말 까다 롭습니다 ... 나는 한동안 그것을 시험해 보았습니다. 문제의 근본 원인은 div # container {height : 100 %} – Kasturi
입니다. 4 년 후,이 방법은 [CSS flex box model] (http://stackoverflow.com/a/26558073/1269037)을 사용하면보다 쉽게 수행 할 수 있습니다.). 다른 모든 솔루션은 clunky입니다. –