Wordpress CSS 排列 div : container/footer to get a 100% landing page

标签 wordpress css height wrapper sticky-footer

我在安排我的 div 时遇到问题,以便我可以看到没有垂直滚动条的 100% 登陆页面(我不想删除该选项,我只想在开始时有一个 100% 屏幕页面)。

我有一个页眉和页脚在我的容器之外。

这是我的CSS

    html {
        height: 100%;
        font-family: serif;
        font-size: 137.5%;
        -webkit-font-smoothing: antialiased;
    }

    body {
        font-family: Georgia, "Times New Roman", Times, serif;
        height:100%;
        margin: 0;
    }
   .container {
    width: 100%;
    min-height: 100%;
    background-color:#3FC;  

    }

    footer {
        text-align: center;
    width: 100%;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    }

这里有两张图片可以说明问题所在。容器是绿色的,页脚有 3 种颜色,所有这些都是为了查看我更改内容时实际发生的情况。如您所见,页脚未显示在第一张图片中,但粘在第二张图片的底部。我想删除容器中的这个额外空间。

top of page bottom and footer

更新:已解决? 你好!经过几个小时的搜索示例并尝试应用于我的元素后,我刚刚尝试了一些东西,但它没有用。现在,请告诉我这在某种程度上是否是一个大禁忌,但它奏效了,我很高兴我能够自己做到。

我所做的是为页脚和页眉 div 设置高度。然后在我的容器 div 中设置 min-height: calc(100% - totalheightvalueofbothdivs);

瞧,它起作用了。我试着放大和缩小,但仍然很好。将继续在不同的浏览器等中进行故障排除。

现在我有:

<header>
<container>
<footer>

我在想在页脚/页眉上设置高度可能不好?但我不需要这样做,因为我知道它们有多大,可以只使用 calc() 并且不要将它们设置在页脚/页眉中。

最佳答案

请确定您是否需要单页应用程序。在那种情况下,您的页眉和页脚将具有固定的高度,并且您的容器将覆盖碎石的其余空间。这是你想要的吗?请看下面的代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .mainWrap {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }
    .headerMain {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        height: 50px;
        border-bottom: 1px solid #000;
        background: #fff;
        z-index: 2;
    }
    .sectionMain {
        position: absolute;
        height: 100%;
        background: #efefef;
        width: 100%;
        padding: 50px 0px;
        box-sizing: border-box;
        z-index: 1;
    }
    .footerMain {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        border-top: 1px solid #000;
        background: #fff;
        z-index: 1;
    }
</style>
<body>
    <div class="mainWrap">
        <header class="headerMain">Test Header</header>
        <section class="sectionMain">Test Body</section>
        <footer class="footerMain">Test Footer</footer>
    </div>
</body>
</html>

关于Wordpress CSS 排列 div : container/footer to get a 100% landing page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42717178/

相关文章:

jquery - Bootstrap Horizo​​ntal NavBar 跨度页面宽度

css - 高度为 100%-body 的粘性页脚 -> 没有 javascript 可能吗?

html - CSS制作一个单元格网格,每个单元格填充其行的100%高度

php - 在 Wordpress 中显示 'Posts Page' 上的特色图片

wordpress - New Relic API key 在哪里?

css - 如何在小显示器的情况下保持居中图像的滚动

html - Gridle SCSS - 3 个固定高度的响应列

wpf - 如何在 WPF 中找到任意字形的精确大小?

CSS下拉菜单问题

css - wordpress 中的 Css 网格面临的问题