Foros del Web » Creando para Internet » CSS »

Tamaño fijo

Estas en el tema de Tamaño fijo en el foro de CSS en Foros del Web. Hola, estoy haciendo una página web que tiene un header y un footer que tienen que ocupar cada uno 10% de la pantalla y luego ...
  #1 (permalink)  
Antiguo 18/05/2016, 04:57
 
Fecha de Ingreso: marzo-2016
Ubicación: Tarragona
Mensajes: 4
Antigüedad: 3 años, 2 meses
Puntos: 1
Tamaño fijo

Hola, estoy haciendo una página web que tiene un header y un footer que tienen que ocupar cada uno 10% de la pantalla y luego la parte del medio es el 80% restante

Y así es como lo tnego hecho, lo que pasa es que cuando el contenido es demasiado grande se amplía toda la pantalla en vez de sólo el section (con scroll).

Es decir que tengo el scroll de toda la página, pero yo quiero que sólo se cambie el tamaño del section que está en medio del header y footer.
  #2 (permalink)  
Antiguo 18/05/2016, 07:19
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.012
Antigüedad: 8 años, 3 meses
Puntos: 149
Respuesta: Tamaño fijo

Enseñanos como tienes los estilos de las secciones
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #3 (permalink)  
Antiguo 19/05/2016, 02:22
 
Fecha de Ingreso: marzo-2016
Ubicación: Tarragona
Mensajes: 4
Antigüedad: 3 años, 2 meses
Puntos: 1
Respuesta: Tamaño fijo

Código de la template

Código PHP:
<header class="table-row">
            <div class="table-cell">
                <nav class="no-margin navbar">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="navbar-header col-sm-5">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homeheader">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <div class="row">
                                    <div class="col-sm-6 col-xs-4">
                                        <a class="bavbar-brand" href="index.php">
                                            <div class="logo"></div>
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-xs-4">
                                        <div class="circle no-margin">
                                            <p>24H</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="collapse navbar-collapse col-sm-7" id="homeheader">
                                <ul class="nav navbar-nav">
                                    <li><a href="index.php">principal</a></li>
                                    <li><a href="services.php">servicios</a></li>
                                    <li><a href="products.php">productos</a></li>
                                    <li><a href="galery.php">galería</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </header>
        <section class="table-row">
            <article class="table-cell">
                <div class="container-fluid">
                    <div class="row">
                        <?php require($this->viewFile); ?>
                    </div>
                </div>
            </article>
        </section>
        <footer class="table-row">
            <div class="table-cell">
                <nav class="no-margin navbar">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="navbar-header col-sm-5">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homefooter">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                    <p style="color:#FFFFFF"><?php echo $language['home_footer_string_1']; ?></p>
                                    <p style="color:#FFFFFF"><?php echo $language['home_footer_string_2']; ?></p>
                            </div>
                            <div class="collapse navbar-collapse col-sm-7" id="homefooter">
                                <ul class="nav navbar-nav">
                                    <li><a href="javascript:;">seccion adicional</a></li>
                                    <li><a href="javascript:;">seccion adicional</a></li>
                                    <li><a href="contact.php"><?php echo $language['home_footer_string_5']; ?></a></li>
                                    <li><a href="javascript:;">seccion adicional</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </footer>
    </body>
CSS:

Código:
body,html{
	margin:0px;
	height:100%;
	min-width:100%;
	max-height:100%;
}
header nav{
	background-color:#000000;
	box-shadow: 0px 10px 25px 20px rgba(0,0,0,0.75);
}
footer nav{
	background-color:#000000;
	box-shadow: 0px -10px 25px 20px rgba(0,0,0,0.75);
}
header{
	height:10%;
}
footer{
	height:10%;
}
.icon-bar{
	background-color:#FFFFFF;
}

.table{ display:table;height:100%;margin-bottom:0;width:100%;}
	.table-row{display:table-row}
		.table-cell{display:table-cell;}
		.table-cell.middle{vertical-align:middle;}
		.table-cell.top{vertical-align:top;}
		.table-cell.bottom{vertical-align:bottom;}
la acción en sí services.php que es la que tiene que hacer scroll solo ella, el footer y el header tienen que estar arriba y abajo y el espacio del medio es esto: Pero no quiero usar el position fixed para no hacer esa "trampa"

Código PHP:
<div id="services" class="col-sm-12 no-padding">
    <
div class="row no-padding no-margin vertical-scroll">
        <
div class="col-sm-8 col-xs-8 auto-margin">
            <
div class="row">
                <
div class="col-sm-2 hidden-xs">
                    <
img width="100%" height="90px" src="res/icons/customer1.jpg">
                </
div>
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-2 hidden-xs">
                    <
img width="100%" height="90px" src="res/icons/customer1.jpg">
                </
div>
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-2 hidden-xs">
                    <
img width="100%" height="90px" src="res/icons/customer1.jpg">
                </
div>
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
            <
div class="row">
                <
div class="col-sm-10">
                    <
label>Lorem Ipsum</label>
                    <
pLorem ipsum dolor sit amet.</p>
                </
div>
            </
div>
        </
div>
    </
div>
</
div
Edito para añadir que en el inspector, al poner el height 100% en el article me dice Unknown property name

Última edición por Brokhael; 19/05/2016 a las 03:53
  #4 (permalink)  
Antiguo 21/05/2016, 09:09
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 5 años, 9 meses
Puntos: 14
Respuesta: Tamaño fijo

Hola. Cuando una propiedad te muestre ese error es porque esta o mal escrito el valor o el atributo. En este caso el que esta mal escrito es el atributo, ya que es "height" no heigth como tienes puesto tu.

Un saludo!

Etiquetas: fijo, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:12.