使用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垂直地動態定位底部元素

回答

相關問題