gpt4 book ai didi

html - 再次 margin 帮助

转载 作者:行者123 更新时间:2023-11-28 08:56:46 25 4
gpt4 key购买 nike

对于之前的问题我深表歉意!!我是 stackoverflow 的新手,不知道如何使用它,因为我是 HTML 和 CSS 的新手。我正在为初学者上第一个类,我们有一个例子,我应该将它复制为我的元素。如果我做的不对,请告诉我,但这是我的代码到目前为止的样子......我仍然希望边 Angular 变圆,页面自行扩展,页脚始终位于底部。在白色之外。

http://jsfiddle.net/xnu0n3o2/

<div id="header">
<h1>H E A D E R</h1>
</div>

<h1>My first project!</h1>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p
<div id="footer">
This is my test footer. I want it to go outside the white area.. To be specific, I want it on the pink below the white. The problem is, when I set the body height to a certain percent, the page doesn't extend on it's own.
</div>

h1 {
color:purple;
text-align:center;
}

html {background-color:pink;
background-attachment:fixed;
}

body {
background-color:white;
border-radius:20px;
margin-right: 245px;
margin-left: 240px;
margin-top: 100px;
}

#header {
background-color:#6F5997;
border-top-right-radius:15px;
border-top-left-radius:15px;
padding:50px;
}

最佳答案

这是您要找的吗?

<!DOCTYPE html>
<html>
<head>
<style>
html,
body {height: 100%; background-color: pink}
body {padding: 40px 40px 0 40px; box-sizing: border-box; margin: 0}
p {margin-top: 0}
.container {height: 100%}

.header {background-color: #6F5997; height: 20%; border-radius: 15px 15px 0 0}
h1 {color: purple; margin: 0}

.body {background-color: #fff; height: 60%; border-radius: 0 0 15px 15px}
.body h2 {color: purple; margin-top: 0}

.footer {height: 20%}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="body">
<h2>My first project!</h2>
<p>blah blah blah blah blah</p>
</div>
<div class="footer">
<p>Blah footer</p>
</div>
</div>
</body>
</html>

上面的代码片段也动态改变了各个部分的高度。这是我刚刚制作的一个 fiddle ( http://jsfiddle.net/pavkr/mdfqgfqn/ ),您可以尝试一下,看看是否可以想出您想要的解决方案。

关于html - 再次 margin 帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27095699/

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