HTML5와 CSS로 하단 요소를 수직으로 동적으로 배치하십시오.

다음과 같은 간단한 페이지를 만들었습니다.HTML5와 CSS로 하단 요소를 수직으로 동적으로 배치하십시오.

[---------------- --div - 100px 필러 색상 -----------------]
[------------------ h1 - 높이 100px ----------------------]
[--------------- div - 100 % - (100px + 100px) -------------]

내가 함께 일하고 있어요 HTML은 다음과 같습니다

<body> 
    <div id="header"> 
    </div> 

    <h1>Big Old Text</h1> 

    <div id="footer"> 
    </div> 
</body>

CSS는 다음과 같습니다.

body { 
    margin: 0px; 
    padding: 0px; 
} 

.background { 
/* background: url(rotate.php) no-repeat center fixed; */ 
    background: url(background_image_05.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#header { 
    background-color: rgba(255,0,255,0.10); 
    height: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

h1 { 
    letter-spacing: 0.1em; 
    font-size: 72px; 
    text-align: center; 
    padding-bottom: 25px; 
    padding-top: 30px; 
    display: block; 
    position: relative; 
    height: 100px 
} 

#footer { 
    position: relative; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background-color: rgba(255,0,255,0.10); 
}

스크롤 막대가 필요하지 않습니다. 나는 이전 버전 인 answer을 수정하려했지만, 내가 원하는 방식대로 잘 작동하지 않았다.

출처

2012-10-20 APR

나는 당신이 ...

HTML 찾고있는 것을 이해하려고 노력했다 :

<body> 
<div id="wrapper"> 
    <div id="header"> 
    </div> 
    <h1>Big Old Text</h1> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
</div>

CSS : 당신은 또한 수

*{box-sizing:border-box;} 

body{ 
    margin:0; 
    padding:0; 
} 

#content{ 
    width:100%; 
    position:absolute; 
    top:200px; 
    bottom:100px; 
    border:red 2px solid; 
}

~을 보아라. 여기 예 : http://jsfiddle.net/dZEQQ/3/

희망 사항입니다. (#content 스타일에주의하십시오.)

출처

2012-10-20 11:45:08 Alfa3eta

완벽하게 작동했습니다. 감사! – APR

HTML5와 CSS로 하단 요소를 수직으로 동적으로 배치하십시오.

답변

관련 문제