我正在整理一个非常简单的网页，作为学习练习的一部分。
如何放置以下2个元素，使它们填满页面（100%宽度和100%高度）:
HTML为:
<div class="container">
<div class="menu">
Menu
</div>
<div class="slider">
<img src="https://placehold.it/2000x2000">
</div>
</div>
和CSS:
.container {
position:relative;
height:100vh;
width:100%;
}
.menu {
position: absolute;
height:100px;
top:0;
left:0;
}
.slider {
position: absolute;
top:100px;
max-height:100vh;
}
.slider img {
max-height:100vh;
object-fit:cover;
}
非常感谢！
确保身体没有边距或填充物。 并将容器的溢出设置为隐藏，以确保没有内容溢出。 一个可能的解决方案如下所示:
null
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}
.menu {
height: 15vh;
width: 100%;
background: coral;
}
.slider {
height: 85vh;
width: 100%;
background: cornflowerblue;
}
.slider img {
height:100%;
}<div class="container">
<div class="menu">Menu</div>
<div class="slider">
<img src="https://placehold.it/2000x2000">
</div>
</div>