Html 我希望我的网站适合屏幕高度，尽管有'；It’内容太少了_Html_Css

Html 我希望我的网站适合屏幕高度，尽管有'；It’内容太少了

html css

Html 我希望我的网站适合屏幕高度，尽管有'；It’内容太少了,html,css,Html,Css,更具体地说，我希望内容部分（白色背景的部分）填充错误的空间，因此页眉和页脚有自己的固定大小，内容部分的大小与填充/适应整个高度所需的大小相同 HTML: 默认情况下，任何内容都会填充可用空间，而不使用CSS。你试过什么？body{height:100vh；}@amn那不是真的。仅对于块级元素，auto宽度为父元素的100%。其他显示选项不适用于高度。不要写一篇写有“。。。“我会的”。只有在你提供了所有相关信息后才能提交你的文章，否则你会失去很多读者，他们在初次阅读后不会回来。第二，至少向我们显示

更具体地说，我希望内容部分（白色背景的部分）填充错误的空间，因此页眉和页脚有自己的固定大小，内容部分的大小与填充/适应整个高度所需的大小相同

HTML:

默认情况下，任何内容都会填充可用空间，而不使用CSS。你试过什么？body{height:100vh；}@amn那不是真的。仅对于块级元素，

auto

宽度为父元素的100%。其他显示选项不适用于高度。不要写一篇写有“。。。“我会的”。只有在你提供了所有相关信息后才能提交你的文章，否则你会失去很多读者，他们在初次阅读后不会回来。第二，至少向我们显示您的HTML代码，并指出哪些部分必须填充可用屏幕。@BramVanroy如果您有块元素，则高度由块级别框填充，因为它们一个叠在另一个下面，扩展了文档元素的计算高度。如果您还有其他内容，例如内联标高框，它们会从左到右、从上到下填充可用空间，再次扩展可用高度。这意味着要么问题完全模糊，要么答案是“你不需要做任何事情，只需生成内容即可”。@TilJungbluth我检查了你的代码，网站看起来不错。你的要求是什么？你能说得更具体一点吗？谢谢。如果你是这个意思，我希望网站始终适合全屏高度，不管是否有足够的内容，或者它是以纵向方向显示在4k屏幕上。如您所见，页眉和页脚具有指定的高度，因此我希望内容部分（#contentWrapper）的高度与所需的高度相同/需要填充网站缺少的高度（如果没有足够的内容）。明白我的意思吗？^-^”（我将很快添加一个新版本的代码和一个解决方案。）哦，正如我刚才看到的，我给你写的几乎和我在描述中写的一样。。。我会考虑如何更具体地描述它，并写给你^-^"

<!DOCTYPE html>
<html>
    <head>
        <title>Startseite - Malermeister Gen</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/script.js"></script>
        <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
        <meta http-equiv="Content-Language" content="de">
        <meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
        <meta charset="UTF-8">
        <meta name="author" content="Til Jungbluth">
        <meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
        <!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="wrapper">
            <div id="headerWrapper">
                <header id="header">
                    <a href="index.html"><img id="headerLogo" src="img/Logo Malerinnung.jpg" alt=""></a>
                    <h1 id="headerHeading">Malermeister Gen</h1>
                    <p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
                </header>
                <nav id="headerNav">
                    <a href="index.html" class="headerNavLinks" id="headerNavLinkActive">Home</a>
                    <a href="unser_team.html" class="headerNavLinks">Unser Team</a>
                    <a href="kontakt.html" class="headerNavLinks">Kontakt</a>
                </nav>
            </div>
            <div id="contentWrapper">
                <h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
                <div id="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
                    <p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
                    <p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
                    <p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
                </div>
            </div>
            <footer id="footer">
                <p id="footerP">© Malermeister Gen GmbH | 
                    <a href="kontakt.html" class="footerNavLinks">Kontakt</a> | 
                    <a href="impressum.html" class="footerNavLinks">Impressum</a>
                </p>
                <button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
            </footer>
        </div>
    </body>
</html>

body{
    background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
    margin: 0;
    font-size: 14px;
}

#header{
    height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
    margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
    padding: 0.6em;
    background: darkgrey;
}

#headerLogo{
    float: left;
    height: 100%;
}

#headerHeading{
    margin: 0 0 0 0.4em;
    display: inline-block;
}

#headerSlogan{
    display: block;
    margin: 0.2em 0.2em 0 0;
    float: right;
    font-size: 1.25em;
}

#gestaltung{
    color: rgb(0, 51, 145);
}

#schoenheit{
    color: rgb(241, 185, 0);
}

#schutz{
    color: rgb(212, 24, 0);
}

#headerNav{
    height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
    margin: 0 0 -0.2em 0;
    padding: 0.5em 0 0.23em 0;
    display: block;
    text-align: center;
    background: lightgrey;
}

.headerNavLinks{
    margin: 0 0.4em;
    padding: 0 0.6em;
    text-decoration: none;
    font-size: 1.25em;
    border: 0.0625em solid black;
    border-radius: 10%;
}

.headerNavLinks:hover{
    background: black;
    color: white;
}

#headerNavActive{
    border: 0.0625em solid green;
    border-radius: 10%;
}

#contentWrapper{
    background: white;
    padding: 0.6em;
}

#contentHeading{
    margin: 0;
}

#content{

}

#content p:last-child{
    margin: 1em 0 0 0;
}

#footer{
    background: darkgrey;
    padding: 0.6em;
}

#footerP{
    margin: 0 0 0.4em 0;
    text-align: center;
}

#scrollBackToTop{
    background: lightgrey;
    display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 480px){

    body{
        font-size: 15px;
    }

}

@media only screen and (min-width: 545px){

    body{
        font-size: 16px;
    }

    #headerHeading{
        margin: 0;
        display: block;
    }

    #headerLogo{
        margin: 0 0.8em 0 0;
    }

}

@media only screen and (min-width: 650px){

    body{
        font-size: 17px;
    }

}

@media only screen and (min-width: 768px){

    body{
        font-size: 18px;
    }

    #headerLogo{
        margin: 0 1.2em 0 0;
    }

    #headerSlogan{
        margin: 0.2em 0.2em 0 0;
    }

}

@media only screen and (min-width: 1024px){

    #wrapper{
        width: 768px;
        margin: auto;
    }

}

@media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/

    html{
        max-height: 52.38em;
    }

    body{
        max-height: 52.38em;
    }

}

@media only screen and (min-width: 2560px){

    #wrapper{
        height: 100%;
    }

}

body {
  height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
  overflow-y:auto; // allows vertical scroll if the content is more.
}