0
나는 코딩 초보자이며 내 기본 컨테이너 DIV에서 100 % 높이를 구현하여 전체 웹 페이지 페이지를 채울 수있는 방법을 찾고 있습니다. 하단에는 끈적 끈적한 바닥 글이 있습니다.유체 레이아웃의 100 % 높이?
끈끈한 바닥 글이있는 전체 웹 페이지로 올바르게 표시하고 싶습니다.
나는 멋진 깨끗한 설명을 위해 곳곳을 들여다 보았으며 나 자신과 다른 사람들이이 문제를 해결하기위한 쉬운 방법을 원합니다. 사전에
감사
HTML
<!doctype html>
<html class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="BSHome.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div class="fluid maincontainer">
<div id="div1" class="fluid">Burning Man Sonata Picture</div>
<div class="Navgationbar">Navigation Bar</div>
<div class="fluid MissionStatement"><strong>Lorem Ipsum</strong> Lorem Ipsum.</div>
<div class="fluid youtube">
<div class="videoWrapper">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="fluid footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
#div1 {
background-color: #000000;
width: 100%;
margin-left: 0;
}
.Navgationbar {
text-align: left;
width: 100%;
margin-left: 0;
}
.MissionStatement {
background-color: #333333;
text-align: left;
margin-left: 0;
width: 90%;
}
.maincontainer {
background-position: center top;
background-repeat: repeat-y;
background-attachment: fixed;
background-color: #333333;
background-size: cover;
background-image: url(images/bg-01.jpg);
width: 100%;
height: 100%;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
}
.footer {
width: 100%;
margin-left: 0;
color: #FFF;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube {
width: 100%;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
width: 100%;
margin-left: 0;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
}
.Navgationbar {
background-color: #333333;
width: 100%;
margin-left: 0;
}
.MissionStatement {
width: 100%;
margin-left: 0;
}
.maincontainer {
width: 100%;
}
.footer {
width: 100%;
}
.youtube {
width: 45%;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
padding-left: 0.75%;
padding-right: 0.75%;
float: none;
height: 100%;
height: auto;
position: relative;
clear: none;
min-height: 100%;
}
#div1 {
color: #FFF;
font-size: 3em;
width: 100%;
margin-left: 0;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
height: 100%;
min-height: 0%;
margin-right: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
}
.Navgationbar {
color: #FFF;
width: 100%;
margin-left: 0;
font-family: serif;
}
.MissionStatement {
color: #FFF;
width: 98%;
text-align: left;
margin-left: 1%;
margin-right: 1%;
}
.maincontainer {
text-align: center;
width: 100%;
overflow-y: auto;
bottom: 100px;
}
.footer {
color: #FFF;
width: 100%;
text-align: center;
background-color: #330066;
position: static;
margin-bottom: 5px;
}
.youtube {
width: 45%;
margin-left: 1%;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
. Calc, Webkit Calc 및 Calc (100 % - 142px)를 사용하여 moz calc로 콘텐츠의 높이를 설정하는 것이 좋습니다. – PugsOverDrugs
calc에 몇 가지 잠재적 인 지원 문제가 있습니다. IE9 및 Android 브라우저, http://caniuse.com/#feat=calc 위의 방법은 하단에서 150 픽셀 떨어진 곳에서 수행합니다. http://jsbin.com/simeza/3 / – grmdgs