gpt4 book ai didi

html - 如何将div一个放在另一个下面?

转载 作者:行者123 更新时间:2023-11-28 19:31:40 30 4
gpt4 key购买 nike

这就是我想做的:

在顶部固定导航栏,使其在滚动时下降,

那么我希望第一个div直接位于导航div之下。并且该div将覆盖屏幕的90%(导航栏为10%),并且仅包含图像。

在此之下是div,我将在其中插入主要内容/文本。如果您知道我的意思,那么向下滚动时也应该占用屏幕的100%?

最后也是div中的一个小页脚栏。

查看我的代码,您会发现它是非常基本的,我想保持这种方式。.我只需要div保持一个在另一个之下。



* {
box-sizing: border-box;
}

html,
body {
height: 100%;
width: 100%;
}

body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}

ul#horizontal-list {
list-style: none;
}

ul#horizontal-list li {
display: inline;
}

ul {
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: center;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: red;
}

.navbar {
position: relative;
/*height: 10%;*/
width: 100%;
background-color: black;
color: white;
text-align: center;
}

.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}

.header {
position: absolute;
width: 100%;
height: 100%;
background-image: url("img/background.jpg");
background-color: grey;
}

.content {
position: absolute;
height: 100%;
width: 100%;
background-color: white;
}

.footer {
height: 50px;
width: 100%;
background-color: yellow;
}

<!DOCTYPE html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>John's Work</title>
<meta name="description" content="My Personal Portfolio">
</head>

<body>


<div class="navbar">

<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>

</div>


<div class="header">

</div>

<div class="content">
lorem ipsum text
</div>

<div class="footer">
Copyright by
</div>




</body>

</html>

最佳答案

删除了所有div的所有position:absolute属性。希望这可以帮助



* {
box-sizing: border-box;
}

html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/background.jpg");
background-color: grey;
}
.content {
height: 100%;
width: 100%;
background-color: red;
}
.footer {
height: 50px;
width: 100%;
background-color: yellow;
}

<!DOCTYPE html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>John's Work</title>
<meta name="description" content="My Personal Portfolio">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="header"></div>
<div class="content">lorem ipsum text</div>
<div class="footer">Copyright by</div>
</body>
</html>

关于html - 如何将div一个放在另一个下面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54878461/

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