Tema: Tamaño fijo
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/05/2016, 02:22
Brokhael
 
Fecha de Ingreso: marzo-2016
Ubicación: Tarragona
Mensajes: 4
Antigüedad: 5 años, 8 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