How to create a height limit of a page with CSS

Question

How to create a height limit of a page with CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am doing some practices of a Web page. My problem is that I want to delimit a maximum height of my page but I can not find the way, I read that it could be with max-height but it does not respect me and when my elements are finished I still leave a lot of space down.

Until the end of my last element that is in the image that is 'mineral water' a lot of space is created that I do not occupy so I want to delimit a high maximum.

---- HTML ----

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="referenceFirebase.js"></script>
<script src="productos.js"></script>
<link rel="stylesheet" href="estilosMenuNuevo.css">
<title> Productos</title>
</head>


<body onload="load();">

 <h1 class="menu">Menú</h1>
 <h3 class="categoriaBebidas"> BEBIDAS</h3>
 <h3 class="categoriaComida"> ALIMENTOS</h3>

 <div class="bebidas" id="cajaBebidas"></div>

<div class="comida" id="cajaComida"></div>



</body>

</html>



    @import url('https://fonts.googleapis.com/css?family=PT+Serif');


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

body {

background: #4B5050;
margin: 10px;
padding: 10px;
width: 330px;
background-image: url("fondo.jpg");
}

html css

asked by Packvt 08.02.2018 в 23:48

source

2 answers

1

You can occupy the property overflow with value hidden that is used to hide your scroll when you determine a high maximum

You can also use overflow-x or overflow-y

body {
  background-image: url("fondo.jpg");
  background: #4B5050;
  margin: 10px;
  padding: 10px;  
  max-height: 10px;
  width: 330px;
  overflow: hidden;
}

answered by 08.02.2018 в 23:57

nav-tabs within other nav-tabs Parameter step with Target - Action

score 0 · Accepted Answer

I do not know if you are putting all the CSS and we need to know the html , but I think the problem is that you are using the body as a background, because even if you put a limit ( that actually is true) the truth is that visually this always occupies 100% of the height of the viewport. Look for example, just put a border and you will realize what I say.

* {
margin: 0;
padding: 0;
 }

body {

background: #4B5050;
margin: 10px;
padding: 10px;
width: 330px;
height: 10px;
border: solid red 10px;
background-image: url("http://picsum.photos/250/200");
}

It is a characteristic of body , however, and it is not an obligation, a best practice is to do it via main container and to this add the background, like this:

* {
margin: 0;
padding: 0;
 }

body {
}

.principal-container{
  background: #4B5050;
  margin: 10px;
  padding: 10px;
  width: 330px;
  height: 100px;
  border: solid red 10px;
  background-image: url("http://picsum.photos/250/200");
}

<div class="principal-container"></div>

Eye! this will only affect the background image, the elements that exceed the maximum height of the body will continue to appear, so that it does not protrude visually you must add as you have recommended a overflow: hidden; to the container.

Now, you probably think it's an error or strange behavior, the truth is that no, it was thought precisely for that to be what had to happen, since usually when you apply an image or background color to the body , being the penultimate possible ancestor tag (the 1st is the html tag) it was thought that this background should always be seen as the background of the whole document.

My sources W3C & W3 .