1

Tengo mi index.html, y en éste se encuentra una cabecera con diferentes opciones para que según la que selecciones (excepto login y registrarse) se cargará el div #contenido con la página externa solicitada.

Hasta ahí todo bien: sí se trae la página que solicito, pero como mi div ya tienen su tamaño establecido en el archivo CSS, y como voy a cargar diferentes páginas HTML (obviamente por separado), ¿qué puedo hacer para que mi div #cuerpo se ajuste a los tamaños (verticalmente) de las páginas que cargo?

Este es mi index.html

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <link rel="stylesheet" href="estilos/estilos.css" />
    <meta charset="utf-8" />
  </head>

  <body>

    <div id="ve" class="ve"></div>

    <div id="general">
      <div id="encabezado" class="encabezado">
        <a id="anime">ANIME</a>
        <a id="manga">MANGA</a>
        <a id="youtubers">YOUTUBERS</a>
        <a id="liveaction">LIVE ACTION</a>
        <a id="contacto">CONTACTO</a>
        <a id="registrarse">REGISTRARSE</a>
        <a id="loguearse">LOGUEARSE</a>
      </div>

      <div id="cuerpo">
        <div id="contenido"></div>
      </div>

      <div id="piepagina"></div>
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/codigo.js"></script>
  </body>

</html>

Y en el archivo JavaScript que tengo ligado tengo este código para una de las páginas externas que cargo al div:

$(document).ready(function() {
    $('#manga').click(function(event) {
        $.get('manga.html', function(htmlexterno) {
            $('#contenido').html(htmlexterno);
        });
    });
});

Y este es el css que manejan las paginas que cargaré:

/* Estilos INDEX*/
*{
	margin: 0;
	padding: 0;
}


#encabezado a { 
  margin-top: 50px;
  padding: 20px; 
  text-decoration: none; 
  transition: all 500ms; 
  color: #D50000; 
  text-shadow: 0 2px 0 black; 
} 
#encabezado a:hover { 
  filter: blur(0px); 
  cursor: pointer; 
} 

a{
	filter: blur(2px);
	font-family: 'Baloo Bhaina', cursive;
	font-size: 16px;
}

body{
	background-image: url(../estilos/fondo.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

#general{
	opacity: 0.7;
	margin: auto;
	width: 960px;
	height: 800px;
	background-color: #E1BEE7;
}

#encabezado{
	opacity: 0.7;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	width: 940px;
	height: 30px;
	background-color: #FFCDD2;
}

#cuerpo{
	opacity: 0.7;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	width: 940px;
	height: 580px;
	background-color: #FFE0B2;
}

/* Estilos LOGIN Y REGISTRARSE*/
#popup{
	width: 100%;
	height: 100%;
	color: #FFF; 
	background-color:rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.5s;
}

#formulario{
	width: 300px;
	height: 300px;
	padding: 25px;
	background-color: #FFF;
	color: #666;
	top: 50%;
	left: 50%;
	position: absolute;
	margin-left: -175px;
	margin-top: -175px;
	font-family: 'Baloo Bhaina', cursive;
	font-size: 16px;
}

/* Estilos MANGA*/
#tomosre{
	font-family: 'Downcome', bold;
	text-align: center;
}

#sinopsis, #titulosinopsis{
	font-family: 'Arial';
	text-align: center;
}

#tomo1,#tomo2,#tomo3,#tomo4,#tomo5,#tomo6,#tomo7,#tomo8,#tomo9,#tomo10,#tomo11{
	width: 180px;
	height: 256px;
	padding: 5px;
	display:block;
	margin:auto;
}

4
  • Por Dios, signos de puntuación.
    – leonbloy
    el 3 jul. 2017 a las 2:53
  • Podrías mostrar el contenido de tu fichero estilos.css facilitaría saber que estas haciendo. Ahora es muy seguro que le estés aplicando un height fijo cuando lo mejor es que te valgas de la propiedad min-height
    – NekoOs
    el 3 jul. 2017 a las 4:00
  • Claro, en un momento lo añado, perdón por la respuesta tardía. el 3 jul. 2017 a las 4:19
  • Simplemente al #cuerpo quitale la propiedad height, y se solucionara tu problema. el 3 jul. 2017 a las 16:23

2 respuestas 2

3

min-height es la propiedad que estás buscando. Cambia para esa propiedad en lugar de height.

min-height establece la altura mínima de un elemento. Lee mas en MDN min-height, w3schools

$('.cabezado-item').click(function() {
    var number = 200+Math.floor(Math.random() * 600);
    $('#contenido').height(number+'px');
});
.cabezado-item {
    cursor: pointer;
    margin-right: 10px;
    padding: 5px;
    background-color: palegoldenrod;
}
#cuerpo{
	opacity: 0.7;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	width: 95%;
	min-height: 170px;
	background-color: #FFE0B2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Haga clic en la "navegación": 
<a id="anime" class="cabezado-item">ANIME</a>
<a id="manga" class="cabezado-item">MANGA</a>

<div id="cuerpo">
    <div id="contenido"></div>
</div>

En ese caso, si por alguna razón la primera solución no es una opción, (pero sólo si la primera opción no funcionará para lo que está tratando de hacer, que dudo mucho) entonces puede hacer algo como esto, con jQuery:

$(document).on('click', '.cabezado-item', function(){
    var number = 200+Math.floor(Math.random() * 600);
    $('#contenido').height(number+'px');
    
    var $contHeight = $('#contenido').height();
    $('#cuerpo').height($contHeight);
    console.log('#cuerpo height = '+$('#cuerpo').height()+'px');
});
.cabezado-item {
    cursor: pointer;
    margin-right: 10px;
    padding: 5px;
    background-color: palegoldenrod;
}
#cuerpo{
	opacity: 0.7;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	width: 95%;
	height: 170px;
	background-color: #FFE0B2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Haga clic en la "navegación": 
<a id="anime" class="cabezado-item">ANIME</a>
<a id="manga" class="cabezado-item">MANGA</a>

<div id="cuerpo">
    <div id="contenido"></div>
</div>

2
  • Gracias me sirvió, solo que cuando carga una pagina grande no se pone completo el contenedor queda corto y el contenido sobrepasa el div aunque en el get con el que cargo especifique lo que quiero traer. el 3 jul. 2017 a las 21:05
  • 1
    Ya funcionó era el caché de chrome que jodía, muchas gracias. el 3 jul. 2017 a las 21:25
2

Si lo que quieres es que el height se adapte en función de lo que le pasas:

Creo que la opción idónea sería que no establezcas un height por defecto al cuerpo, porque estás limitando ese cuerpo a ese tamaño. (podrías modificarlo con css, pero obligarías a repintar al navegador y esas cosas acaban relantizando)

Creo que lo mejor es que pruebes con height auto, o si no, estableciendo un min-height.

1
  • Bienvenido. Las solicitudes de aclaración se realizan mediante comentarios pero para poder hacerlos en preguntas de otros se requiere de 50 puntos de reputación. Los lineamientos recomiendan sólo responder preguntas bien formadas (referencias Cómo responder)..
    – Rubén
    el 3 jul. 2017 a las 7:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.