0
523
Vistas¿Cómo usar la posición fija para cubrir el ancho completo de la pantalla?
Estoy usando position: fixed para corregir el nombre del sitio web en la parte superior de la página; sin embargo, al hacerlo, el límite del div finaliza tan pronto como se completa el texto en el div. No cubre la longitud completa de la pantalla:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;"> <div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;"> <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> </div> </nav> Así es como funciona con Fixed: 
Así es como quiero que se arregle en la parte superior: 
·
Santiago Trujillo
3 Respuestas
Responde la pregunta0
uso 100vw
nav{ width = 100vw; } body{ height: 200vh; background-image: linear-gradient(red, yellow); } nav { position: fixed; top:0; left:0; width:100vw; /* extra */ height: 50px; background: red; margin-bottom: 0%; } .nagi{ background-color: bisque; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center; } <body> <nav> <div class="nagi"> <h1> <a href="#">Ratnesh Nagi</a> </h1> </div> </nav> </body>
·
Santiago Trujillo
Denunciar
0
Establezca la propiedad right e left en cero.
Puede especificar la posición horizontal de los elementos posicionados utilizando las propiedades right e left . Vea el fragmento a continuación:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;"> <div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;"> <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> </div> </nav>
·
Santiago Trujillo
Denunciar
0
Puede usar flex quizás como una alternativa con algún otro CSS creativo
body { margin: 0; } .container { display: flex; flex-direction: column; align-items: center; } .navbar { /* force this to full width*/ align-self: stretch; margin-bottom: 1rem; } .navbar-content { text-align: center; background-color: bisque; font-family: Copperplate, Papyrus, fantasy; color: black; /* make it have a size without the */ border: 1px solid transparent; } .navbar-brand { text-decoration: none; } .new-thing { background-color: #bbdddd; /* force this to full width just for fun */ align-self: stretch; } <div class="container"> <nav class="navbar navbar-light bg-light"> <div class="navbar-content"> <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> </div> </nav> <div class="new-thing">I am next in line</div> </div>
·
Santiago Trujillo
Denunciar
Responde la pregunta