Question

如果以前回答过这个问题，请原谅。我尝试了一些选择，但没有一个适合我。

我正在使用Css网格区域属性，但是正文标记未覆盖整个屏幕视图并且在底部被切断。我想要行和内容应该向下移动到全屏幕。

这是代码，

<div class="container">
        <div class="mainmenu">
            <site-logo>
                <a href="./index.html"><img class="logo" src="SemG-Logo-Final-01small-2.png"></a>
                <p>Full Stack Developer</p>
                <p>Web Apps | E-Commerce</p>
            </site-logo>
            <div>
                <nav class="menuitem">
                    <li><a href="./index.html" title="">Home</a></li>
                    <li><a href="./index.html" title="">About Us</a></li>
                    <li><a href="./index.html" title="">Services</a></li>
                    <li><a href="./index.html" title="">Contact Us</a></li>
                </nav>
            </div>
            <div class="socialicon">
                <a href="https://twitter.com/"><i class="fab fa-facebook"></i></a>
                <a href="https://www.instagram.com/"><i class="fab fa-twitter-square"></i></a>
                <a href="https://twitter.com/"><i class="fab fa-linkedin"></i></a>
            </div>



            <hr>
            <div class="copyright">
                <p>© 2018 I Click Digital Ltd <br> All rights reserved</p>
            </div>
        </div>

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;

}

Answer 1

将百分比值设置为元素的高度时，浏览器会查看父级的高度来计算它。

设置body { height:100% }并不会让正文在文档中展开，因为它的父<html>高度等于0，因此其中100％为0。

这里显而易见的答案是设置html { height:100% }但是根元素<html>的父级是什么，你应该阅读The Initial Containing Block

<html>父级基本上是您在下面看到的红色框viewport

Answer 2

创建一个具有固定位置的新div，并将hr和.copyright div放在该固定div中。

＆＃13;

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;

}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

＆＃13;

<div class="container">
        <div class="mainmenu">
            <site-logo>
                <p>Full Stack Developer</p>
                <p>Web Apps | E-Commerce</p>
            </site-logo>
            <div>
                <nav class="menuitem">
                    <li><a href="./index.html" title="">Home</a></li>
                    <li><a href="./index.html" title="">About Us</a></li>
                    <li><a href="./index.html" title="">Services</a></li>
                    <li><a href="./index.html" title="">Contact Us</a></li>
                </nav>
            </div>
            <div class="socialicon">
                <a href="https://twitter.com/"><i class="fab fa-facebook"></i></a>
                <a href="https://www.instagram.com/"><i class="fab fa-twitter-square"></i></a>
                <a href="https://twitter.com/"><i class="fab fa-linkedin"></i></a>
            </div>



            <div class="footer">
              <hr>
              <div class="copyright">
                  <p>© 2018 I Click Digital Ltd <br> All rights reserved</p>
              </div>
            </div>
        </div>

＆＃13;

没有覆盖全屏

2 个答案: