gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:14:34 25 4
gpt4 key购买 nike

我有一个相当简单的页面,我想在其中创建如下内容:

[----------------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 ,但它并没有完全按照我想要的方式进行。

最佳答案

我试图了解您在寻找什么......

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)。

关于css - 使用 HTML5 和 CSS 垂直动态定位底部元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12987840/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com