使用HTML5和CSS垂直地动态定位底部元素

我有一个相当简单的页面，我想要创建类似如下的东西：使用HTML5和CSS垂直地动态定位底部元素

[---------------- --div - 100px填充颜色-----------------]
[------------------ h1 - height 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/

我希望这是你在找什么（注意＃内容样式）。

来源

2012-10-20 11:45:08 Alfa3eta

完美运作。谢谢！ – APR

使用HTML5和CSS垂直地动态定位底部元素

回答

相关问题