Tamaño fijo

Brokhael · #1 (**permalink**) 18/05/2016, 04:57

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.

petit89 · #2 (**permalink**) 18/05/2016, 07:19

Enseñanos como tienes los estilos de las secciones

Brokhael · #3 (**permalink**) 19/05/2016, 02:22

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

martinmiranda90 · #4 (**permalink**) 21/05/2016, 09:09

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!