我有一个相当简单的页面,我想创建类似的内容:
[----------------------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);
}
我不想要任何滚动条。我试图修改此较早答案的一个版本,但这并不是我想要的方式。
我试图了解您在寻找什么...
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 Styles)。