Question

我正在尝试使用以下CSS将div设置为全屏，但始终会显示滚动条，并且如果我将宽度和高度的减小幅度超过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;
}

Answer 1

我认为问题是由于边框尺寸的增加，即4px，所以请尝试

#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;
}

Answer 2

您应该阅读有关CSS box model的信息。

问题是边框被视为元素外部。因此，您的元素的宽度/高度为100vh + 8px。 8px的边界值中的4px。

您可以通过添加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>

全屏div显示滚动条

2 个答案: