时间戳

首页 > 解决方案 > 为我的主容器分配 100vh 的高度，以便页面上的所有内容无需滚动

html - 为我的主容器分配 100vh 的高度，以便页面上的所有内容无需滚动

问题描述

我希望在屏幕上显示我的部分的所有容器，而无需用户用鼠标向下滚动以查看已布置的所有内容。我已经为我的主容器分配了一个高度，100vh但它仍然在滚动。

有什么帮助吗？下面是代码和代码笔。

HTML

<div class="main_container">
<h3>404 not found</h1>
    <div class="wrapper">
        <div class="wrapper__item img">
            <img src="https://images.unsplash.com/photo-1540786121371-70e1e61ac897?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
                alt="scarecrow">
        </div>
        <div class="wrapper__item text">
            <h2>I have bad news <br> for you</h2>
            <p class="text">
                The page you are <br>looking
                for might be removed or <br> is
                temporarily unavailable
            </p>
            <a href="#" id="btn">Back to Homepage</a>
        </div>
        
    </div>
   <div class="markup">Created By</div>
</div>

CSS 
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;900&family=Space+Mono:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
    font-size: 10px;
    font-family: 'Inconsolata',
        monospace;
    font-family: 'Space Mono',
        monospace;
}


.main_container {
    height: 100vh;
}

h3 {
    margin: 2rem 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-family: 'Inconsolata',
        monospace;
}



.img img {
    display: inline-block;
    width: 70%;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 10rem;
    margin-right: 1.6rem;
    height: 100vh;
    width: 80%;
    margin: auto;
}

.wrapper h2 {
    margin-bottom: 2rem;
    font-size: 2.6rem;
}

.wrapper p {
    font-size: 1.3rem;
}


#btn {
    font-size: 1rem;
    margin-top: 2rem;
    display: inline-block;
    text-decoration: none;
    background: #000;
    color: #ffff;
    padding: 1rem;
}

.markup{
    text-align: center;
    font-size: 1.3rem;
}

https://codepen.io/Helye23/pen/vYGYovj

标签： htmlcss

解决方案

你.wrapper有height: 100%，但你h3在上面，所以你的内容高度.main-container总是会100% + h3 height导致每次溢出。

如果页面仍然溢出，而您的内容对于用户屏幕来说太大了，这种情况总是会发生。你永远不能相信每个用户都有一个大屏幕。一种替代方法是您img和文本的实际尺寸，这会导致屏幕较小的元素尺寸减小。

推荐阅读