1
머리글 120px 높이, 바닥 글 120px 높이, 및 최소 높이가 600px이지만 브라우저가 다음과 같은 주요 내용의 웹 페이지를 갖고 싶습니다. (또는 사용자가 Firefox에서 "control minus"로 줌 축소) 을 세로로 늘리면 사용 가능한 모든 공간에서 머리글과 바닥 글 공간을 뺀 값을 채우기를 원합니다.CSS : 머리말, 꼬리말 및 streatchable 주요 내용 영역
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
이는 CSS입니다 : 여기
내가 뭘하려 달성의 올바른 방법은 무엇<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header { height: 120px; background: red; }
div#mainContent { height: 100%; background: green; }
footer { height: 120px; background: blue; }
</style>
</head>
<body>
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
</body>
</html>
: 여기
header { height: 120px; background: red; }
div#mainContent { min-height: 600px; height: 100%; background: green; }
footer { height: 120px; background: blue; }
감사합니다.
해결책을 시도했습니다. 위의 코드를 참조하십시오. 바닥 글을 바닥으로 밀어내는 뷰포트에서 사용 가능한 공간을 모두 채우기 위해 100 % 높이를 확장 할 수 있다고 생각할 수 있지만 그렇지 않습니다. 이것은 작동하지 않습니다. 올바른 수정 사항을 게시하십시오. –
아무도이 질문에 대답하지 않았기 때문에 주 콘텐츠 영역을 늘려서 HTML 페이지를 세로로 늘릴 방법이 없으므로 페이지 높이가 너무 작 으면이 높이가 전체 뷰포트를 채우도록 늘어납니다 ? 뷰포트 높이를 얻고 jQuery를 사용하지 않고 사용 가능한 공간을 채우기 위해 DOM을 조작 할 방법이 없습니까? –