如何将第一个 div 放在屏幕的 100% 处,然后在降低其他 div 时它们是自动的,具体取决于它们拥有的内容。第一个 div 吃了第二个我知道这是因为绝对,但我不知道如何解决它......
这是html
<div id="home">
contenido al 100% de la pantalla
</div>
<div id="about">
auto dependiendo del contendido de este div
</div>
<div id="galeria">
auto dependiendo del contendido de este div
</div>
这是CSS
#home{
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
top:0;
background-image:url(../image/Construction_0.png);
background-position:50% 50%;
background-size:cover;
}
#about, #galeria{
width:100%;
overflow:auto;
display:block;
margin:0;
padding:0;
text-align:center;
}
如果您的意思是希望它垂直覆盖 100%,您可以使用以下内容:
来源:https ://www.sitepoint.com/css-viewport-units-quick-start/
您必须
html
正确构建代码,以便<div>
在另一个代码中包含“X”<div>
此外,要完全自动调整大小和边距,您必须设置
auto
参数的值heigth, width, margin y padding
,但这已经完全取决于您希望如何设置页面样式。div
块元素,所以放回去display: block;
有点多余。position: absolute;
因为他们只是根据顶部、底部、左侧和右侧的值来寻找要容纳的有问题的元素;然后设置宽度和高度为 100% 就足够了div
,第二个和第三个将占据其父容器的全部可用宽度,在本例中为标签body
max-width
min-width
div
第二个和第三个没有position
声明都不会影响它们。也就是说,它们是多余的并且不会导致任何可见的结果,您可以将它们删除top
left
关于第二个和第三个元素必须达到的最小宽度:
这最好通过媒体查询来处理,但为什么呢?
min-width
例子,那么所有的内容都比你写的少或多,它只会被看到适应你建立的那个程度示例 1
现在,如果您确定要根据内容寻找
div
第二个和第三个进行自我调整;也许它会为你服务,然后修改它的性质,即:div
将其行为传递bloque
给混合inline-block
行为,稍后您可以在其中为其分配最小宽度,例如50%
div
用内容填充它们时,它们将向右扩展。示例 2
参考
在规则中
#home
:您必须将该属性替换
height: 100%
为min-height: 100vh
。这是因为前者将元素的高度限制在其父元素的高度,因此不会增长;而第二个将确定元素的最小高度必须是屏幕的高度,而不管它的位置是相对的、绝对的还是固定的。您必须更改
position: absolute
为position: relative
.重要提示:不需要设置
display: block
,因为元素div
是块的元素。