Problems with width and height at 100%

Question

Problems with width and height at 100%

Navigation

#1 by (4 votes)

3

I need help, I have problems with a CSS code. I have the following document both html and body I have set them to occupy all the height and width of the screen. inside body I have a container box, that in turn has two boxes plus header and content, the header does not have a predefined height, but I want the content box to take the remaining parent container, but I put a high height and it takes the height of the body and not the remainder of the container, then attach the code beforehand thanks.

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: blue;
}
.contenido {
  width: 100%;
  height: 100%;
}
.cabecera {
  background: red;
  width: 100%;
}
.main {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}

<div class="contenido">
  <div class="cabecera">
    <h1>Esto es la cabecera</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio explicabo quae sed nisi cupiditate mollitia praesentium, quisquam consequuntur expedita inventore eligendi placeat, ratione, ipsa reprehenderit voluptates deserunt, dicta facilis soluta.</p>
  </div>

  <div class="main">
    <p>contenido principal</p>
  </div>
</div>

html css

asked by Andres Venegas Ruiz 02.07.2016 в 17:48

source

1 answer

Difference between Interface and Abstract class (particularly in PHP) Doubt about error type of data and values in Java

score 4 · Accepted Answer

To create an app without vertical scrolling, the "classic" approach is to give a fixed stop to the header and position the% co_filling% absolutely and setting the <div> and top pasted to the edges of the container.

.cabecera {
   width: 100%;
   height: 50px;
}

.cuerpo_expandible { 
  position: absolute;
  top: 50px;
  bottom: 0px;
}

This starts where the head ends and ends at the bottom of the screen.

That said, I propose a more contemporary approach .. this option will make it easier to add a footer, assigns, etc. Also you do not need a fixed size section.

with flexbox

This is another approach to work on the layout of your page. It is highly recommended because today, this very well supported .

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: blue;
}

/* flex box */

.contenedor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cabecera {
  background: red;
  flex: 0;
}
.contenido {
  flex: 1;
  background: #000;
  color: #fff;
}

<div class="contenedor">
  <div class="cabecera">
    <h1>Esto es la cabecera</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio explicabo quae sed nisi cupiditate mollitia praesentium, quisquam consequuntur expedita inventore eligendi placeat, ratione, ipsa reprehenderit voluptates deserunt, dicta facilis soluta.</p>
  </div>
  <div class="contenido">
    <p>contenido principal</p>
  </div>
</div>