Question

我的页面上有一个标题，我有2个div和一个标题栏。这是它的html：

<div class="header row">
    <div class="frontpage-header-content">
         <div class="large-4 columns frontpage-header-content-div">
              <!-- some content -->
         </div>
         <div class="large-8 columns frontpage-header-image-div">
            <div class="frontpage-bg-image-wrapper">
               <div class="header-bg-image frontpage-header-hero">
                   <img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png">
                   <div class="hero-overlay overlay"></div>
                </div>
                <div class="bg-overlay overlay"></div>
            </div>
        </div>
    </div>

      <?php get_template_part('title-bar'); ?>
</div><!-- /.header -->

右侧div有一个div frontpage-bg-image-wrapper，它在大屏幕上有一个背景图像，在较小的屏幕上被移除，并被一个在大屏幕上看不到的image元素取代。所以，我根据屏幕大小切换background image image元素。这在chrome中工作正常，但是当我在safari中测试时，布局会中断。 background image在大屏幕上不可见，在较小的屏幕上，image元素变得可见。问题是div .frontpage-header-image-div和.frontpage-bg-image-wrapper不会占用Safari中的任何height，而0px位于height，而Chrome中的image占用.frontpage-header-image-div { height: 100%; .frontpage-bg-image-wrapper { float: right; position: relative; width: 100%; height: 100%; background-size: cover; background: url('/wp-content/themes/sfk/assets/images/sfk-bg.png') no-repeat; .header-bg-image img { display: none; } } .hero-overlay { display: none; } } .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: rgba(255, 255, 255, .3); } .header { position: relative; } .frontpage-header-hero { width: 100%; position: relative; } .frontpage-header-content, .singlepage-header-content { width: 100%; } .frontpage-header-content { display: flex; align-items:center; } .frontpage-header-content-div { padding-left: 0; } @include breakpoint(medium down) { .frontpage-bg-image-wrapper { background: none !important; .header-bg-image img { display: block !important; min-height: 450px; object-fit: cover; object-position: 0 50%; width: 100%; } .bg-overlay { display: none; } .hero-overlay { display: block !important; } } .frontpage-header-content, .singlepage-header-content { padding-top: 84px!important; position: relative; } .frontpage-header-content-div, .frontpage-header-image-div { position: absolute; top: 84px; padding: 0; } .header > .columns { padding: 0; } } } min-height。我该如何解决这个问题？这是css：

550px

所以，如果我将100%设置为任何内容，例如background，那么它会占用空间，然后您可以看到背景图像，但这不是解决方案，因为当我开始将屏幕尺寸调整为较小尺寸，背景不会占据整个高度，最小高度不应该硬编码，而是以某种方式设置为[ { id: '35', username: '4f224bd78d1a943ead9db2f73991e93dc8227335', firstName: '8c81f070b9adad3d3693', lastName: 'f9f5792d8a827e83974b', email: 'd6fd38bb112da3a55b23@3c1f780dea427bc097ab.com', created_at: '2017-03-16T07:35:15.676Z', updated_at: '2017-03-16T07:35:15.676Z', deleted_at: null, number: null }, { id: '36', username: '613400c032540519fce322f4aa6abdb082834005', firstName: '8bbc5692042ea4ce06f6', lastName: 'b26d6701c275e07e1ea1', email: '59e8d5b35185810a31e5@41677c1723806c2afac0.com', created_at: '2017-03-16T07:35:15.768Z', updated_at: '2017-03-16T07:35:15.768Z', deleted_at: null, number: 10 } ]图像的[ { id: '35', username: '4f224bd78d1a943ead9db2f73991e93dc8227335', firstName: '8c81f070b9adad3d3693', lastName: 'f9f5792d8a827e83974b', email: 'd6fd38bb112da3a55b23@3c1f780dea427bc097ab.com', created_at: '2017-03-16T07:35:15.676Z', updated_at: '2017-03-16T07:35:15.676Z', deleted_at: null, Player: { number: null } }, { id: '36', username: '613400c032540519fce322f4aa6abdb082834005', firstName: '8bbc5692042ea4ce06f6', lastName: 'b26d6701c275e07e1ea1', email: '59e8d5b35185810a31e5@41677c1723806c2afac0.com', created_at: '2017-03-16T07:35:15.768Z', updated_at: '2017-03-16T07:35:15.768Z', deleted_at: null, Player: { number: 10 } } ]高度。

这就是它在大屏幕上的样子

这是我调整屏幕大小时发生的不必要的影响

图像不会一直显示在页面顶部。

CSS div占用背景图像的高度

0 个答案: