How to fit all content on the screen? Border at the bottom of the page does not appear in the display or browser

Navigation
2

I'm trying to create a responsive layout **, and I have problems with the end of div border. I purposely put a red border around the div, so if something goes wrong I'd immediately identify it. The goal is for me to have all the page content displayed on the device (whatever it is) without the scroll bar, but displaying 100 of the content of the page (no real scrolling required). The two end edges (right and bottom corner) are disappearing from the device screen. Follow the code used 

html,
body {
  margin: 0;
  height: 100%;
}
.um {
  background: #333;
  color: white;
  padding: 50px 20px;
  height: 100%;
  /* para falta de suporte */
  height: -webkit-calc(100% - 100px);
  /* para Chrome */
  height: -moz-calc(100% - 100px);
  /* para Firefox */
  height: calc(100% - 100px);
  /* para suporte nativo */
}
#containerGeral {
  position: relative;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: red;
  background-color: yellow;
}
#caixaTeste {
  width: 15%;
  height: 15%;
  background-color: blue;
  position: absolute;
  top: 0%;
}
#caixaTeste2 {
  width: 15%;
  height: 15%;
  background-color: green;
  position: absolute;
  right: 0%;
  top: 0%;
}
#containerTeste {
  width: 40%;
  height: 40%;
  border-style: solid;
  border-color: red;
  background-color: green;
  bottom: 30%;
  position: absolute;
}
#containerFilho {
  position: absolute;
  right: 0%;
  width: 65%;
  height: 65%;
  background-color: #ccc;
}
#containerFilho2 {
  position: absolute;
  right: 0%;
  width: 65%;
  height: 65%;
  background-color: blue;
  bottom: 0%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>
  <div>
    <h1 align="center">RELATIVO: CONTAINER GERAL</h1>
    <div id="caixaTeste">ABSOLUTO</div>
    <div id="caixaTeste2">ABSOLUTO</div>
    <div id="containerTeste">NOVO CONTAINER
      <div id="containerFilho">CONTEINER FILHO
        <div id="containerFilho2">CONTAINER FILHO - FILHO</div>
      </div>
    </div>
  </div>
</body>

</html>

** I do not believe there is anything 100% responsive.

    
asked by anonymous 08.02.2017 / 19:23

2 answers

1

Add box-sizing: border-box; to your external container, #containerGeral .

From box-sizing property documentation :

  

The CSS box-sizing property is used to change the default property of the box model, used to calculate widths and heights of the elements. You can use this property to emulate the browser behavior ( browser ) that does not properly support the CSS box model specification.

Functional version below: 

<!DOCTYPE html>
    <html>
    	<head>
    	<meta name="viewport" content="width=device-width, user-scalable=no">
    <style type="text/css">
    	html ,
    
    body { margin:0; height: 100%;}
    .um { background: #333; 
    	color: white; 
    	padding: 50px 20px; 
      	height: 100%;                        /* para falta de suporte */  
      	height: -webkit-calc(100% - 100px);  /* para Chrome */
        height: -moz-calc(100% - 100px);     /* para Firefox */
      	height: calc(100% - 100px);          /* para suporte nativo */
      	
     }
    
    #containerGeral
    			{
    				box-sizing: border-box;
    				position: relative;
    				width: 100%;
    				height: 100%;
    				border-style: solid;
    				border-color: red;
    				background-color: yellow;
    			}
    
    #caixaTeste
    		{
    			width: 15%;
    			height: 15%;
    			background-color: blue;
    			position: absolute;
    			top: 0%;
    		}
    
    #caixaTeste2
    		{
    			width: 15%;
    			height: 15%;
    			background-color: green;
    			position: absolute;
    			right: 0%;
    			top: 0%;
    		}
    
    
    #containerTeste
    
    		{
    			width: 40%;
    			height: 40%;
    			border-style: solid;
    			border-color: red;
    			background-color: green;
    
    			bottom: 30%;
    			position: absolute;
    		}
    
    #containerFilho
    		{
    			position: absolute;
    			right: 0%;
    			width: 65%;
    			height: 65%;
    			background-color: #ccc;
    		}
    
    
    #containerFilho2
    		{
    			position: absolute;
    			right: 0%;
    			width: 65%;
    			height: 65%;
    			background-color: blue;
    			bottom: 0%;
    		}
    </style>		
    <title></title>
    	</head>
    	<body>
    		<div id="containerGeral" ><h1 align="center">RELATIVO: CONTAINER GERAL</h1>
    			<div id="caixaTeste">ABSOLUTO</div>
    			<div id="caixaTeste2">ABSOLUTO</div>
    					<div id="containerTeste">NOVO CONTAINER
    						<div id="containerFilho">CONTEINER FILHO
    							<div id="containerFilho2">CONTAINER FILHO - FILHO</div>
    						</div>
    					</div>
    		</div>
    	</body>
    </html>
    
08.02.2017 / 20:50
3

What happens is that the border containing #containerGeral is being added to the height and the width of the element, then the measure will be 100% + a borda .

To solve this either you remove the border or you change the height e width 100% to height/width: calc(100% - (a borda)) .

Remember that you should set the thickness of the border and make x2 in case there is both the right and the left edge and it goes to the top and bottom edges as well.

Another detail is that you are not using any reset , so your h1 tag and other elements may behave differently across browsers.

For your specific case, you can put: 

html, body{margin:0; height:100%, padding:0;}

and 

h1{margin:0;}

My reset is basic: 

*{margin:0; margin:0;padding:0}

But there are other well-known ones such as Mayer .

Here's how: 

<!DOCTYPE html>
<html>
	<head>
    	<meta name="viewport" content="width=device-width, user-scalable=no">
    	<style type="text/css">
		html,body {
		  margin: 0;
		  height: 100%;
		  padding:0;
		}
		#containerGeral {
		  position: relative;
		  width: calc(100% - (4px));
		  height: calc(100% - (4px));
		  border-style: solid;
		  border-color: red;
		  border-width:2px;
		  background-color: yellow;
		}
		#caixaTeste {
		  width: 15%;
		  height: 15%;
		  background-color: blue;
		  position: absolute;
		  top: 0%;
		}
        h1{margin:0;}  
		#caixaTeste2 {
		  width: 15%;
		  height: 15%;
		  background-color: green;
		  position: absolute;
		  right: 0%;
		  top: 0%;
		}
		#containerTeste {
		  width: 40%;
		  height: 40%;
		  border-style: solid;
		  border-color: red;
		  background-color: green;
		  bottom: 30%;
		  position: absolute;
		}
		#containerFilho {
		  position: absolute;
		  right: 0%;
		  width: 65%;
		  height: 65%;
		  background-color: #ccc;
		}
		#containerFilho2 {
		  position: absolute;
		  right: 0%;
		  width: 65%;
		  height: 65%;
		  background-color: blue;
		  bottom: 0%;
		}
    	</style>		
    	<title></title>
    </head>
   	<body>
   		<div id="containerGeral" >
   			<h1 align="center">RELATIVO: CONTAINER GERAL</h1>
   			<div id="caixaTeste">ABSOLUTO</div>
    		<div id="caixaTeste2">ABSOLUTO</div>
    		<div id="containerTeste">NOVO CONTAINER
    			<div id="containerFilho">CONTEINER FILHO
    				<div id="containerFilho2">CONTAINER FILHO - FILHO</div>
    			</div>
    		</div>
    	</div>
    </body>
</html>
    
08.02.2017 / 20:27
Jquery find the key from a value Multidimensional Array PHP