3

Estoy buscando la forma de crear un div en html cuyo ancho sea el 100% de la pantalla y no se corte en el ancho definido por el contenedor principal. Algo así como una franja horizontal para colocar un formulario de suscripción a una newsletter.

He probado con:

.contenedor_newsletter{
    margin-left: -100%;
    margin-right: -100%;
}

Y aunque a la izquierda lo pilla bien, a la derecha siempre deja un trozo sin rellenar. ¿Hay alguna forma de hacer este break del contenedor principal?

EDIT: añado una imagen de lo que intento hacer:

introducir la descripción de la imagen aquí

Las líneas rojas sería el ancho que tiene el contenedor principal. Las líneas azules, sería el ancho total de la pantalla. Se puede apreciar como en el margen derecho deja un pequeño trozo sin rellenar con las reglas css que he indicado antes.

Pdta: el formulario que se ve en la izquierda, lo centraría posteriormente. Lo que me interesa es mostrar una franja de color (ahora mismo está en rosa) envolviendo dicho formulario, como corte entre el post y los comentarios de la entrada.

7
  • Puedes añadir una imagen de como queda ahora para entender bien que es lo que buscas hacer?
    – David
    Commented el 11 dic. 2019 a las 15:39
  • Hecho, David. He añadido una imagen y he explicado mejor lo que busco.
    – lk2_89
    Commented el 11 dic. 2019 a las 15:48
  • Añade tu html para poder replicar tu ejercicio
    – user128299
    Commented el 11 dic. 2019 a las 15:50
  • No tiene html puro, estoy editando un theme de WordPress para mostrar forzosamente esa banda horizontal con el formulario.
    – lk2_89
    Commented el 11 dic. 2019 a las 15:51
  • ¿Por qué no pruebas añadiendo un modal con bootstrap? Este es el típico pop-up, se puede hacer para que salte una ventana emergente con el formulario que desees. mdbootstrap.com/docs/jquery/modals/forms
    – Lucía
    Commented el 11 dic. 2019 a las 15:53

2 respuestas 2

5

No se si te puede servir este codigo que ocupa todo el ancho visible del navegador. Luego ya tu lo centras poninedole menor tamaño y left: lo que sea

.contenedor_newsletter{
    width: 100vw;
}
1
  • Muchas gracias Dr. Manhattan. Utilizando ese width además de eliminar el sidebar lateral a través de código me ha dado el efecto deseado.
    – lk2_89
    Commented el 11 dic. 2019 a las 16:31
0

Una solucion es poner a tu caja "principal" una posición relativa y a tu caja "hija" donde vendrá ese formulario ponerla como absoluta

Una vez eso a la caja "hija" manipulas su posición sin temor que salga de la caja padre.

Yo lo realice de esta manera:

HTML:

<section id="container">
        <div id="main">
            <div class="contenedor_newsletter">
                <h2>Aqui va el formulario</h2>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eaque veritatis inventore laborum nesciunt, pariatur culpa delectus adipisci! Voluptates, enim amet eligendi doloremque eveniet non tempora nulla consequuntur! Praesentium, sequi.</p>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus et, perferendis odit eum aliquam quaerat dignissimos, deleniti asperiores. Odit, exercitationem reprehenderit voluptate rerum natus cum iste fugiat. Quae, molestiae esse.</div>
            <div>Temporibus repellendus sed sunt cum obcaecati quo esse, possimus dolorum, magnam minus nemo iste tempore aliquid tempora itaque voluptatum accusantium ut fuga adipisci saepe earum corporis eveniet quaerat! Eius, placeat.</div>
            <div>Corporis eum molestias consectetur pariatur facilis sint sunt magnam, culpa minima ex consequuntur, nisi repellendus tempora aut magni voluptatum accusamus, quasi vitae cupiditate debitis delectus quaerat. Quaerat, dignissimos nemo culpa.</div>
            <div>Adipisci magni, totam quam mollitia quae quasi repellendus? Fuga enim eveniet voluptas quo rerum quas natus ea molestiae ex temporibus consectetur distinctio laboriosam doloribus deserunt, dolorum ipsum nemo minus dolor.</div>
        </div>
    </section>

CSS:

    body {
    background-color: black;
    overflow: hidden;
}

#container {
    width: 40%;
    background-color: white;
    margin: 0 auto;
    border-radius: 20px;
    position:relative;
}

.contenedor_newsletter {
    background-color: red;
    position: absolute;
    width: 100%;
    top: 15px;
    left: -100%;
    text-align: center;
    padding-left: 100%;
    padding-right: 100%;
}

#main {
    padding-top: 80px;
    padding: 10px;
}

Al final coloque un overflow:hidden al body por si se sale la caja del DOM

4
  • Gracias Victor, aunque modificar todo el contenedor de una página WordPress no me parece quizás lo más acertado... Buscada alguna regla de CSS que se aplique única y exclusivamente a ese div que necesito.
    – lk2_89
    Commented el 11 dic. 2019 a las 16:16
  • Solo al contenedor de wordpress coloca la posicion relativa y a tu caja que quieres manipular lo puse en el ejemplo .contenedor_newsletter Commented el 11 dic. 2019 a las 16:18
  • Probado, pero no consigue el efecto deseado...
    – lk2_89
    Commented el 11 dic. 2019 a las 16:24
  • ¿Tienes el enlace de la parte que quieres modificar? Commented el 11 dic. 2019 a las 16:26

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.