5

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

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

如果你滚动到底部，你会发现整个内容都没有显示出来，就好像它在视口下面一样。要了解我的意思，请选择底部的文本，然后滚动即可。

我尝试对内容应用底部边距，.content-block但直到或多或少 200 像素才产生任何效果，这没有任何意义。有人可以帮我吗？

4

3 回答 3

3

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

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

于 2013-10-06T12:45:20.683 回答
1

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

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

height: calc(100% - 155px);

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

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

于 2013-10-06T12:48:15.823 回答
0 
        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>
于 2013-10-06T13:22:35.110 回答