这是我的沙箱:https://codepen.io/joondoe/pen/VJyxqN
这里是情况的图片:
我想知道为什么第一个“很棒的内容”无法获得 300vh，并且后面的文字似乎与第一个重叠？
我想让这两个div一个接一个地接下去，相反，它们纯粹是重叠的，怎么可能呢？
我好像设置了相关的高度和宽度，div基本都是block element by default ,
这里是我的片段:
<!DOCTYPE html>
<html>
<head>
<title>seamless_background_test</title>
<style>
html,body{
margin:0;
padding:0;
}
.seamless_background{
min-height: auto;
width: 100%;
/*bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit*/
background: url(./seamless_background_test2a.jpg) center repeat ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content_container{
min-height: 300vh;
background: orange;
width: 75%;
margin:auto;
}
.content h1{
padding:15px;
color:rgb(140, 49, 0);
display:flex;
justify-content: center;
align-items: center;
}
#wind_content{
position:relative;
height: 100%;
width: 100%;
margin:auto;
top: 15vh;
background:rgba(255, 255, 255, 1);
font-style:Arial;
font-size: 1.5em;
display:flex;
justify-content: center;
align-items: center;
}
#grass_content{
position:relative;
height: 100%;
width: 100%;
margin:auto;
top: 15vh;
background:rgb(197, 245, 66);
font-style:Arial;
font-size: 1.5em;
display:flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="seamless_background" >
<div id="wind_content" >
<div class="content_container">
<h1>I am an awesome content :)!<h2>
<div>
</div>
<div id="grass_content" >
<div class="content_container">
<h1>I am an awesome content :)!<h2>
<div>
</div>
<div>
</body>
</html>任何提示都会很棒， 谢谢
最佳答案
看起来有很多开始标签你还没有关闭。
我不是很理解“重叠”这个词。
但是我已经关闭了所有打开的标签，我想这就是你要找的
<!DOCTYPE html>
<html>
<head>
<title>seamless_background_test</title>
<style>
html,body{
margin:0;
padding:0;
}
.seamless_background{
min-height: auto;
width: 100%;
/*bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit*/
background: url(./seamless_background_test2a.jpg) center repeat ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content_container{
min-height: 300vh;
background: orange;
width: 75%;
margin:auto;
}
.content h1{
padding:15px;
color:rgb(140, 49, 0);
display:flex;
justify-content: center;
align-items: center;
}
#wind_content{
position:relative;
height: 100%;
width: 100%;
margin:auto;
top: 15vh;
background:rgba(255, 255, 255, 1);
font-style:Arial;
font-size: 1.5em;
display:flex;
justify-content: center;
align-items: center;
}
#grass_content{
position:relative;
height: 100%;
width: 100%;
margin:auto;
top: 15vh;
background:rgb(197, 245, 66);
font-style:Arial;
font-size: 1.5em;
display:flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="seamless_background" >
<div id="wind_content" >
<div class="content_container">
<h1>I am an awesome content :)!</h1>
</div>
</div>
<div id="grass_content" >
<div class="content_container">
<h1>I am an awesome content :)!</h1>
</div>
</div>
</div>
</body>
</html>关于html - CSS _ HTML : my DIVs overlap despite I have set a relevant height and HTML element div are blocks by default，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56812338/