全宽和全高页面中的菜单 + 滑块

Question

我正在整理一个非常简单的网页，作为学习练习的一部分。

如何放置以下 2 个元素以填满页面（100% 宽度和 100% 高度）：

一个菜单
带有可变图像的滑块

.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;
}

<div class="container">
  <div class="menu">
    Menu
  </div>

  <div class="slider">
    <img src="https://placehold.it/2000x2000">
  </div>
</div>

非常感谢！

Answer 1

确保正文没有边距或填充。并将容器的溢出设置为 hidden 以确保没有内容溢出。可能的解决方案如下所示：

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.menu {
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: coral;
}

.slider {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    box-sizing: border-box;
    background: cornflowerblue;
}

.slider img {
    width:100%;
}

<div class="container">
    <div class="menu">Menu</div>
    <div class="slider">
        <img src="https://placehold.it/2000x2000">
    </div> 
</div>

全宽和全高页面中的菜单 + 滑块

Menu + slider in a full width and height page

html

css

position

flexbox

full-width