Question

使用FoundationPress构建WordPress主题。在主页上，我想使用Foundation的grid-y medium-grid-frame vertical grid创建垂直网格布局，以将所有内容保留在视口中。因此，将<main>元素中的内容不扩展到footer之外。图像将始终响应视口的高度。现在错了：

Screenshot of overflow issue

因此，页脚应始终位于视口的底部，并且不得垂直滚动，<main>内容可以很好地适合内部并响应任何屏幕尺寸。除非其可移动，否则页脚将位于堆叠图像的底部。似乎超级基础。

这里是有问题的站点https://comedydynamics.com，我试图在CodePen上进行复制，但事实并非如此。

试图改用x-grid，但没有运气。混乱的CSS位置，溢出，甚至不同的显示选项。真的很困惑。

我的主题代码：

<?php $post_objects = get_field('home_feat_posts');

    if ($post_objects): ?>

    <?php foreach ($post_objects as $post_object): ?>

        <a class="cell medium-6 large-offset-1 large-5 img-container" href="<?php echo get_permalink($post_object->ID); ?>">

            <?php

            $image = get_field('home_image', $post_object->ID);

            $size = 'fp-xlarge'; // (thumbnail, medium, large, full or custom size)

            if ($image) {
                echo wp_get_attachment_image($image, $size);
            }

            ?>

        </a>

    <?php endforeach; ?>

<?php endif; ?>

输出：

<main class="grid-y">

    <div class="cell medium-auto medium-cell-block-container home-container">

        <div class="grid-x pt-2 pb-2">

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

        </div>

    </div>

</main>

这与我在WordPress中调整图片大小有关吗？

希望我提供了足够的信息，哈哈。

谢谢！

See the Pen

我们的目标：

What we want. No overflow of main content

基础垂直X-Y网格：内容为100vh，以y网格为响应速度

0 个答案: