我有这个日历代码,但当我放大页面顶部的一部分去外面的body
,我甚至不能滚动起来看它
通常情况下,一切看起来都很好,就像这张照片一样
但是当我放大到200%的时候,我得到了这个例子
如果我继续缩放,图片完全看不见了。我怎么能解决这个问题,我做错了什么吗?
<div style="width: 100%; max-width: 700px; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); margin: auto;">
<div class="calendar">
<div class="calendar__picture">
</div>
<div class="grid-container" id="grid_container">
<div class="grid-item-number">22</div>
<div class="grid-item-number">23</div>
<div class="grid-item-number">24</div>
<div class="grid-item-number">25</div>
<div class="grid-item-number">26</div>
<div class="grid-item-number">27</div>
<div class="grid-item-number">28</div>
<div class="grid-item-number">29</div>
<div class="grid-item-number">30</div>
<div class="grid-item-number">31</div>
<div class="grid-item-number">22</div>
<div class="grid-item-number">23</div>
<div class="grid-item-number">24</div>
<div class="grid-item-number">25</div>
<div class="grid-item-number">26</div>
<div class="grid-item-number">27</div>
<div class="grid-item-number">28</div>
<div class="grid-item-number">29</div>
<div class="grid-item-number">30</div>
<div class="grid-item-number">31</div>
<div class="grid-item-number">22</div>
<div class="grid-item-number">23</div>
<div class="grid-item-number">24</div>
<div class="grid-item-number">25</div>
<div class="grid-item-number">26</div>
<div class="grid-item-number">27</div>
<div class="grid-item-number">28</div>
<div class="grid-item-number">29</div>
<div class="grid-item-number">30</div>
<div class="grid-item-number">31</div>
</div>
</div>
这里是CSS
.calendar {
position: relative;
width: 100%;
box-sizing: border-box;
box-shadow: 0 5px 50px rgba(#000, 0.5);
border-radius: 8px;
overflow: hidden;
}
.calendar__picture {
position: relative;
height: 200px;
color: #fff;
background: url("/static/serviss.png") 70% 100%/ 700px 273px no-repeat fixed;
text-shadow: 0 2px 2px rgba(#000, 0.2);
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 10px;
}
.grid-item-number {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(175, 175, 175, 0.8);
border-radius: 10px;
margin: auto;
margin-bottom: 10px;
font-size: 30px;
position: relative;
width : 95%;
aspect-ratio: 1/1;
}
1条答案
按热度按时间kknvjkwl1#
首先,在
.calendar
上有overflow: hidden
。这将删除滚动该元素的功能。如果希望该元素可滚动,则必须使用overflow: auto
。但是,如果您只想让日历体可滚动,而不是日历本身,则必须稍微更改CSS。
1.在元素的
style
属性中放置大量的CSS并不是一个好的做法,将CSS保存在.css文件中,将HTML保存在.html文件中!1.你将整个元素放置在body的死点。如果元素太大,它将在顶部或左侧部分被切断,并且无法滚动到,因为滚动只能向下或向右。所有超出DOM左侧和顶部边界的内容都将被切断。
所以,可能的解决方案:尝试使用flexbox或grid将日历居中。您可以用途:
这将使日历内容居中。但是,它不会位于屏幕的中心,而是DOM放置它的任何位置。要使其位于整个屏幕的中心,您可以添加
width: 100%;
和height: 100%;
,假设主体已经覆盖了整个屏幕。希望有帮助。