0

Tengo este problema: se ve una parte sin gradient en la parte de abajo de mi pantalla. No sé cómo quitarlo, lo intenté con margin pero lo deja feo cuando lo paso a vista de teléfono-tablet. ¿Me pueden ayudar?

Éste es mi código HTML (para ver el error hay que darle al botón de "Página Completa"):

body 
{
  background: -webkit-linear-gradient(#D10000,black);
  background: -o-linear-gradient(#D10000,black);
  background: -moz-linear-gradient(#D10000,black);
  background: linear-gradient(#D10000,black);
}

.contrast-color
{
  color: #FFFFFF;
  text-shadow: 4px 4px black;
}

.mih1 { font-size: 40px;
  color: white; }

.myh1 { font-size: 40px;
  color: black; }

.mybutton
{
  color: black;
  border: 2px solid #D10000x|;
  padding: 70px 30px;
  text-decoration: none;
  display: inline-block;
  font-size: 50px;
  margin: 2px 2px;
  cursor: pointer;
  background-color: white;
  -webkit-transition-duration:0.5s;
  transition-duration:0.5s
}

.mybutton:hover
{
  background-color: #D10000;
  color: black;
  -webkit-transition-duration:0.5s;
  transition-duration:0.5s
}
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Alta de calificaciones online</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Mis datos</a></li>
        <li><a href="#">Cambiar contraseña</a></li>
        <li><a href="#">Salir</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-4 col-lg-6 col-sm-offset-2 col-md-offset-2 col-lg-offset-3">
      <h1 class="text-center mih1">Bienvenido</h1>
      <h1 class="text-center myh1"> Daniel <small>Becerril López</small></h1><br>
      <button class="mybutton">Asentar calificaciones</button>
    </div>
  </div>
</div>

Ésta es la imagen que me está saltando:

Problema con la parte inferior de la pantalla

3
  • Pues la de abajo, la que no tiene el efecto de gradiant Commented el 2 sept. 2016 a las 1:16
  • ¿Cuál es el resultado esperado?
    – Shaz
    Commented el 2 sept. 2016 a las 1:16
  • Es un color degradado de rojo a negro, yo esperaba en la parte de abajo totalmente negro, obviamente que se venga degradando de rojo. Commented el 2 sept. 2016 a las 1:17

1 respuesta 1

2

Intenta configurando tu CSS y añadiendo las siguientes cosas:

html, body {
    height:100%;
}

Y listo, todo quedará como tu lo deseas :)

html, body{
  height:100%;
 }

body {
   background: -webkit-linear-gradient(#D10000,black);
   background: -o-linear-gradient(#D10000,black);
   background: -moz-linear-gradient(#D10000,black);
   background: linear-gradient(#D10000,black);
   margin:0px !important;
 }

¡Cualquier duda, comentamela! Con gusto te ayudaré, saludos! :D

1
  • 1
    Funcionó perverso! Gracias Commented el 2 sept. 2016 a las 18:23

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.