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

Asked

Viewed 80 times

2

I’m trying to create a fully responsive layout**, and I have problems with the end of the div border. I purposely put a red border around the div, in case something goes wrong I identify immediately. The goal is that I have all the content of the page displayed on the device (whatever it is), without the scrollbar, but displaying 100 of its content (no real need for scrolling). 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 don’t believe there’s anything 100% responsive.

front-end

2 answers

3

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

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

Remembering that you should set the edge thickness and do x2 in case there is both the right and left edge and valley to the top and bottom edge as well.

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

For your specific case, you can put :

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

and

h1{margin:0;}

Man reset is basic :

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

But there are other well-known ones which is the case of Mayer.

See how it looks:

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

  • When I use... height: Calc(100% - 100px); width: Calc(100% - 100px); , there is a blank space. When I use only... height: Calc(100% - 100px); in the div everything, it is the perfect side, appearing the red band I put there. Only the bottom part is missing, where the red border does not appear, the screen is almost perfect. I’m still curious. But it really helps me!

  • I don’t understand what’s going on, what element are you putting these rules on ? I made an edition with an example of your code...@Paulosérgioduff something comments that agent adjusts

1


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

From the box-Sizing property documentation:

The CSS box-Sizing property is used to change the default property of the box model used to calculate widths (widths) and heights (Heights) of the elements. It is possible to use this property to emulate the behavior of the browsers (browser) that do not correctly support the specification of the CSS box model property.

Functional version to follow:

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

  • 1

    is bam like this tmb,, I thought if only Manja Assembly

  • That killed it! Thanks! That single line (box-Sizing: border-box;) changed everything

  • @Always a pleasure to help!

Browser other questions tagged front-end

You are not signed in. Login or sign up in order to post.