Question

我正在用这个问题把头撞在墙上。我认为它与CSS基本布局相关，但我没有看到它...因此我请求其他专业人士的帮助，以便您可以帮助我。请检查以下链接：

http://rosasusaeta.com/cepods/how-we-work.php

如果向下滚动到底部，您将看到未显示整个内容，就好像它位于视口下方一样。要查看我的意思，请选择底部的文本，然后滚动确实有效。

我尝试在内容.content-block中应用边距底部，但是直到或多或少200px才会产生任何影响，这没有任何意义。有人可以帮助我吗？

Answer 1

将“.content-block”的高度设置为80％。它会正常工作。

问题是你将内容块的高度设置为100％，并将body溢出设置为隐藏。因此，视口下方的内容块部分将不可见。

Answer 2

我找到了一种修复方法。我真的不喜欢使用它作为解决方案，我想学习做一个更好的布局，并学习下一次我能做什么，但现在。我使用了这个解决方案：

我将以下css应用于.main-content。因此它从总高度减去155px。 155px是页脚中梯形的高度，主要块的标题高度和主要块的边距。

height: calc(100% - 155px);

我不知道calc()是否存在，但似乎非常有用。我的网站需要仅针对桌面进行优化，所以我没有问题，但这不是一个整体解决方案，因为移动浏览器无法正常工作：

http://caniuse.com/#search=calc

Answer 3

        html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
        .page .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 5%;
            background-color: #0094ff;
            color: #ffffff;
        }

.page .body {
  position: fixed;
  top: 5%;
  left: 0;
  right: 0;
  bottom: 20px; // same as the footer height
}

.page .body .content {
    height: 100%;
    overflow: auto;
}    

.page .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  text-align: center;
}

//标记

<body class="page">  // add class page to body

    <section class="header">
        <div class="full-height as-inline-block">
            Header
        </div>
    </section>

    <section class="body">
        <div class="content">
            Page body
        </div>
    </section>

    <section class="footer">
        footer
    </section>


</body>

CSS：滚动中的文本内容不显示100％的视口

3 个答案: