CODEWITHSUNDEEP
htmlcss
Rand
Rand

Reputation: 37

Fullscreen div showing scrollbar

I am trying to make div set to full screen with following CSS but always a scrollbar shows up and if I lessen width and height more than 100% then this is not working perfectly responsively. Is there a way I can make div set to full screen responsively?

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

Upvotes: 1

Views: 2878

Answers (2)

Mihai T
Mihai T

Reputation: 17687

This issue is related to how CSS box model works.

The problem is that the border is considered, by default, outside the element ( an addition to the actual element ) . So your element has a width/height of 100vh/vw + 8px. 8px from the border values of 4px.

You can easily fix this by adding box-sizing:border-box so that the border width is included in the 'footprint' of the element

See below

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

Upvotes: 5

Kira
Kira

Reputation: 71

I think the problem is due to the increased size of border i.e 4px so just try this 

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

Upvotes: 3

Related Questions