Problem with Css FlexBox the content does not cover 100%

Navigation
4

Good afternoon I hope you can help me. I'm doing a simple layout with Flexbox but I can not get the "content" to cover 100% of the available space, the structure is simple:

  • Menu
  • Content
  • Pie

It is important to emphasize that the "Menu" and "Foot" must have a height: auto , this when the screen changes size the items (children) can adapt and be responsive. Since these 2 work as I wish, even the "Content" is expanded as it grows, this is perfect !, but when I try to include 100% of the space between the "Menu" and the "Foot" is where the problems come from.

EYE: in the "content" leave a Lorem of 600 words so that they can perform the test to expand and just as this "Lorem600" can do the test of covering 100% of the available space between the Menu and foot.

I would greatly appreciate the help you can give me (I already have 2 days looking for information and I do not give with the solution). Thanks !! 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            outline: 0;
        }
        html,
        body {
            height: 100vh;
            width: 100%;
            font-family: Verdana, arial, sans-serif;
        }
         #contenedor {
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content:flex-start;
        }
        #cabecera {

            height: auto;
            width: 100%;
            background-color: #399;
            color: #fff;
            text-align: center;
            align-self: flex-start;
            display: flex;
            flex-wrap: wrap;
        }
        #contenido {
            margin: 10px 0px;
            height: auto;
            width: 100%;
            background-color: yellow;
            display: flex;
            flex-wrap: wrap;
        }
        #pie {
            height: auto;
            width: 100%;
            background-color: #399;
            color: #fff;
            text-align: center;
            align-self: flex-end;
            display: flex;
            flex-wrap: wrap;
        }
        .x {
            font-size: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="contenedor">
        <div id="cabecera">
            <div class="x">Cabecera</div>
            <div class="x">items</div>
            <div class="x">items2</div>
        </div>

        <div id="contenido">
            <p>Lorem600</p>
        </div>

        <div id="pie">
            <div class="x">items3</div>
            <div class="x">items4</div>
        </div>
    </div>
</body>

</html>
    
asked by Miguel Arias 09.02.2017 в 19:26
source

3 answers

2

Using a horizontal layour when you are going to sort the elements vertically does not make sense. You should use flex-direction: column for children to order one after the other vertically. Then, you only need flex: 1 in the content to cover the space between the menu and the footer.

  

It is important to note that the "Menu" and "Foot" must have a height: auto, this when the screen changes in size the items (children) can adapt and be responsive

>

False. They should not have an automatic high, they can have a fixed height and it would still be responsive, since this does not depend on your initial styles, but on your marking.

To achieve a design like the one you want the trick is to know how to use the property flex . This property accepts three values:

  • Growth factor
  • Shrinkage factor
  • Flex basis

By default the value of flex is: 0 1 auto . This property affects the element according to the orientation of the parent element. For example, if the parent has a vertical orientation ( column ) then flex-basis will represent the height of the element.

Example sticky header and footer 

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

header {
  background-color: turquoise;
  flex: 0 0 60px;
}

article {
  background-color: gold;
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

footer {
  background-color: coral;
  flex: 0 0 60px;
}

.big {
  background-color: gray;
  height: 1000px;
  margin: 0 auto;
  width: 100px;
}
<div class="container">
  <header></header>
  <article>
    <div class="big"></div>
  </article>
  <footer></footer>
</div>
    
answered by 09.02.2017 в 20:09
2

One way to solve it is using:

  • flex-basis : property that specifies the flexible base, which is the size initial of a flexible element.

Demo: 

* {
  padding: 0;
  margin: 0;
  outline: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  font-family: Verdana, arial, sans-serif;
}
#contenedor {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#contenedor > * {
  flex: 1;
  flex-basis: 0;
}
#cabecera,
#pie {
  background-color: #399;
  color: #fff;
}
#contenido {
  margin: 10px 0px;
  background-color: yellow;
  flex-basis: 100%;
}
.x {
  font-size: 20px;
  margin: 10px;
  display: inline-block;
}
<div id="contenedor">
  <div id="cabecera">
    <div class="x">Cabecera</div>
    <div class="x">items</div>
    <div class="x">items2</div>
  </div>

  <div id="contenido">
    <p>Lorem600</p>
  </div>

  <div id="pie">
    <div class="x">items3</div>
    <div class="x">items4</div>
  </div>
</div>
    
answered by 09.02.2017 в 20:09
1

You must change the flex-direction to column and set the flex value to the content to fit the size you want.

Try the following code: 

* {
  padding: 0;
  margin: 0;
  outline: 0;
}
html,
body {
  height: 100vh;
  width: 100%;
  font-family: Verdana, arial, sans-serif;
}
#contenedor {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;    /* El flex-direction debe ser column */
  flex-wrap: wrap;
  justify-content: flex-start;
}
#cabecera {
  height: auto;
  width: 100%;
  background-color: #399;
  color: #fff;
  text-align: center;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
}
#contenido {
  margin: 10px 0px;
  height: auto;
  width: 100%;
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  flex: 1;     /* Se le asigna un valor al elemento para que abarque la proporción que necesitas */
}
#pie {
  height: auto;
  width: 100%;
  background-color: #399;
  color: #fff;
  text-align: center;
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
}
.x {
  font-size: 20px;
  margin: 10px;
}
<div id="contenedor">
  <div id="cabecera">
    <div class="x">Cabecera</div>
    <div class="x">items</div>
    <div class="x">items2</div>
  </div>

  <div id="contenido">
    <p>Lorem600</p>
  </div>

  <div id="pie">
    <div class="x">items3</div>
    <div class="x">items4</div>
  </div>
</div>
    
answered by 09.02.2017 в 19:46
Error creating effect with css Separate text with commas, except in quotes, with regular expressions