【问题标题】:background full screen with 100vh but be bigger if screen is minimized vertically背景全屏 100vh 但如果屏幕垂直最小化则更大
【发布时间】:2020-04-23 07:45:06
【问题描述】:

我希望我的背景是 100vh 的全屏,但我也希望如果我垂直最小化屏幕,背景会停留在背景上图片的末尾

标题{背景:#efe0d9;显示:inline-block;宽度:100%;向左飘浮;高度:100vh;填充:1% 0 0;}

我想要一个在屏幕底部结束的背景,因为这样屏幕上的图片就足够大了,但是当我垂直最小化屏幕时,图片保持相同的大小(根据需要),但背景也上升,所以图片与网站的下一部分重叠enter image description here

【问题讨论】:

    标签: html css background screen


    【解决方案1】:

    你试过设置min-height吗?

    编辑:这可能不是您想要的,因为我必须添加一个额外的元素,但您可以尝试将 <header> 包装在高度设置为的容器中100vh,使标题的内容占据您要覆盖的最小高度,并为包装器和标题提供相同的背景颜色。

    检查 sn-p 并切换到全屏以查看背景扩展超出标题的内容。

    #container {
    background: #efe0d9;
    height: 100vh;
    }
    header {
      background: #efe0d9;
    width: 100%;
    }
    .stack {
    height: 100px;
      text-align: center;
    }
    body, p, hr {
      margin: 0;
    }
    <div id="container">
    <header>
    <div class="stack"><hr><p>0px</p></div>
    <div class="stack"><hr><p>100px</p></div>
    <div class="stack"><hr><p>200px</p></div>
    <div class="stack"><hr><p>300px</p></div>
    <div class="stack"><hr><p>400px</p></div>
    <div class="stack"><hr><p>500px</p></div>
    </header>
    </div>

    编辑: 添加一个高度设置为100vh 并显示设置为flex 的容器div,并为标题提供min-height 似乎已经成功了。 Here's an updated fiddle.

    【讨论】:

    • @RedSecret 我编辑了我的答案。让我知道这是否适合您。
    • 它有点适用于 0px 100px 等。但现在我不知道如何将其应用于我的情况
    • 我可以联系您并与您分享代码吗?
    • @RedSecret 将您的代码复制到 jsfiddle 并发布链接。
    • 图片和视频无法添加,看起来有点奇怪
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-27
    • 1970-01-01
    • 2022-01-16
    相关资源
    最近更新 更多