我的页面上有一个标题,我有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 } } ]
高度。
这就是它在大屏幕上的样子
这是我调整屏幕大小时发生的不必要的影响
图像不会一直显示在页面顶部。