Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ocupar el 100% de la altura de la pagina

CSS - Ocupar el 100% de la altura de la pagina

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ocupar el 100% de la altura de la pagina

Publicado por Jonathan (2 intervenciones) el 28/08/2020 06:01:33
Tengo un formulario , donde quiero que la imagen ocupe el 100% de altura de la pagina, pero solo me ocupa el 100% de la pantalla visible y queda un resto sin cubrir, entre menos altura tiene el navegador o dispositivo, mas espacio queda sin cubrir. Adjunto fotografía

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html,body {
	height:100%;
  	margin:0;
  	display: flex;
	flex-direction: column;
}
 
.sesion{
	background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(../../imagenes/fondo_sesion.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	flex: 1;
	height: 100%;
}


Opera-Instantanea_2020-08-27_235656_192.168.1.101
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ocupar el 100% de la altura de la pagina

Publicado por joel (252 intervenciones) el 28/08/2020 08:45:53
Hola Jonathan, prueba a quita el height:100% en el html... y pone 100% en el background-size algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html,body {
  	margin:0;
  	display: flex;
	flex-direction: column;
}
 
body {
	height:100%;
}
.sesion{
	background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(../../imagenes/fondo_sesion.jpg);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	flex: 1;
	height: 100%;
}

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ocupar el 100% de la altura de la pagina

Publicado por Jonathan (2 intervenciones) el 28/08/2020 10:47:08
con esos estilos cubre mucho menos, por lo cual no me sirve, pero se agradece la ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ocupar el 100% de la altura de la pagina

Publicado por Joel (252 intervenciones) el 28/08/2020 14:43:05
A mi me ha funcionado este código... sin flex claro...:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    html, * {
    }
    body{
        max-height:100%;
        background:#8ba987 url('http://www.lawebdelprogramador.com/logolwp100x25.jpg') no-repeat center center;
        background-size:100% 100%;
    }
    </style>
</head>
<body>
    <h1>La Web del Programador</h1>
    <p><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar