section no toma full height

[JuJoGuAl]

Buenas amigos, estoy diseñando un sitio y trato de hacerlo Responsive, el problema es que el SECTION cuya clase es MAIN no me toma el FULL HEIGHT a pesar que el BODY y HTML lo tienen declarado

Dentro de SECTION coloque ARTICULE, puesto que manejare "secciones" en el Body, y como se me pidio que se viera en Columnas les adiccione una classe llamada COL

Css:

Código CSS:

html, body
{
    height: 100%;
}
.main { 
  background: url("img/bg.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
  height: 100%;
  margin: 0;
  /*min-height: 784px;  */
  padding: 0.5em;
}
.main .articulo {
  background: #fff;
  box-shadow: 5px 5px 20px rgba(20,24,44,0.8);
  color: #000;
  display: block;
  margin-bottom: 2em;
  padding-bottom: 1em;
  text-align: center;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.main .articulo h2 {
  font-size: 1.5em;
}
.main .articulo p {
  font-size: 1em;
  line-height: 0.5em;
}
.col{
  width: 40%;
  float: left;
  margin: 50px;
}
@media screen and (max-width:1030px) {  
    .col{
    width: 100%;
    margin: 0px;
    margin-top: 20px;
  }
}
 

HTML

Código HTML:

<section class="main">          
            <article class="articulo col">
                <h2 class="subtit">Trade Consulting</h2>
                <p class="texto">
                    <p>Search and selection of suppliers</p>
                    <p>Sample check</p>
                    <p>Purchase order management</p>
                    <p>Payment management</p>                    
                </p>
            </article>
            <article class="articulo  col">
                <h2 class="subtit">Quality Control & Factory Audit</h2>
                <p class="texto">
                    <p>Sample Check</p>
                    <p>Laboratory Testing</p>
                    <p>Production Audit</p>
                    <p>Post production inspection</p>
                    <p>Pre-shipment inspection</p>
                    <p>Container loading supervision</p>
                    <p>Health & Safety Standards Audit</p>
                </p>
            </article>
            <article class="articulo col">
                <h2 class="subtit">Logistic Consulting</h2>
                <p class="texto">
                    <p>Cargo Insurance</p>
                    <p>Import and export documentation</p>
                    <p>Door to Door service</p>
                    <p>Port to Port service</p>
                    <p>Cargo tracking</p>
                </p>
            </article>
            <article class="articulo col">
                <h2 class="subtit">Investment Opportunities</h2>
                <p class="texto">
                    <p>New Products</p>
                    <p>New Ideas</p>                    
                </p>
            </article>
        </section>
 

Cuando se hace ZOOM para probar como se vera en diferentes pantallas los ARTICULE se salen del SECTION o este no llena todo el body, realmente no se que esta pasando :(

Para verlo en vivo (services)

http://jujogual.esy.es/

[AngelKrak]

agregale un min-height: 784px; en estas clases .main .articulo Linea 91

[JuJoGuAl]

Eso hace que mis cuadros (Articule) se desborden:



Todo esto empezó cuando Agregue el float:left a .col pero entonces de que otra forma puedo hacer que se pongan uno al lado del otro (columnas) evitando que se desborden.

[fede5426]

Agrega overflow:hidden; a tu .main.. cuando flotas elementos tenes que colocarle esta propiedad a su padre para que no se desborden del contenedor.

Saludos

[JuJoGuAl]

Iniciado por fede5426

Agrega overflow:hidden; a tu .main.. cuando flotas elementos tenes que colocarle esta propiedad a su padre para que no se desborden del contenedor.

Saludos

Pense eso incluso me funciona pero me crea un scroll en el MAIN y lo que quiero es que se estire si no cabe lo que tiene...

[JuJoGuAl]

Este es el código de prueba: Aqui

[AngelKrak]

quitale el background a tu Section .main, tambn el min-height: 784px; y pon el bg en tu body

Código CSS:

background: url("../img/bg.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 

tambien quitale el height: 100% a tu html,body o cámbialo por auto:

Código CSS:

html, body {
height: auto;
}
 

[JuJoGuAl]

Iniciado por AngelKrak

quitale el background a tu Section .main, tambn el min-height: 784px; y pon el bg en tu body

El fondo se lo coloco a Main porque no quiero que el Header, el Nav ni el Footer lo toquen, es un fodo diseñado solo para el Contenido como tal de la WEB

Iniciado por AngelKrak

tambien quitale el height: 100% a tu html,body o cámbialo por auto:

No me funciona, no existe una manera de que una caja no se desborde si no que se adapte al padre?

[AngelKrak]

bueno la otra solucion que te traigo es esta y es la ultima que se me ocurre, aun que con la anterior a mi me funciona bien ._.

En la Clase .col agrega height: 30%;

En la Clase .main agrega min-height: 970px; y height: auto; en la Clase .col pero solo en la Media Querie @media screen and (max-width:1030px)

asi:

Código CSS:

@media screen and (max-width:1030px) {
  footer .text{
    width: 100%;
    float: right;
    text-align: center;
  }
    .col{
    width: 100%;
    margin: 0px;
    margin-top: 20px;
    height: auto;
}
  .main {
    min-height: 970px;
  }
}
 

[JuJoGuAl]

La Solucion al problema! solo con cambiar el tamaño de .main en la media query me funciona perfecto.!