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>
<p> Lorem 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>
<p> Lorem 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>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<label>Lorem Ipsum</label>
<p> Lorem 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
