css 全屏div显示滚动条

scyqe7ek  于 2023-05-02  发布在  其他
关注(0)|答案(2)|浏览(183)

我试图使div设置为全屏以下CSS,但总是滚动条显示,如果我减少宽度和高度超过100%,那么这是不是工作完美的响应。有没有一种方法可以让div设置为全屏响应?

#fullScreen
{
  position: absolute; 
   text-align: left;
   left: 0px;
   top: 0px;
   width: 100vw;
    height: 100vh;
   z-index: 5;
   background-color: #FFDAB9;
   border: 4px solid #FF0000;
   border-radius: 10px;
}
kb5ga3dv

kb5ga3dv1#

此问题与CSS box model的工作方式有关。
问题是默认情况下,边框被认为在元素之外(实际元素的添加)。所以你的元素的宽度/高度为100vh/vw + 8px8px4px的边界值。
您可以通过添加box-sizing:border-box来轻松解决此问题,以便将边框宽度包含在元素的“足迹”中
见下文

#fullScreen {
  position: absolute;
  text-align: left;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #FFDAB9;
  border: 4px solid #FF0000;
  border-radius: 10px;
  box-sizing:border-box;
}
<div id="fullScreen">

</div>
pwuypxnk

pwuypxnk2#

我认为问题是由于边界i的大小增加。e4px所以试试这个

#fullScreen
{ 
margin: 0px; 
position: absolute; 
text-align: left; 
left: 0px; 
top: 0px; 
width: calc(100% - 8px); 
height: calc(100% - 8px);
z-index: 5;
background-color: #FFDAB9; 
border: 4px solid #FF0000; 
border-radius: 10px;
}

相关问题