我有这个日历代码，但当我放大页面顶部的一部分去外面的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%;，假设主体已经覆盖了整个屏幕。希望有帮助。