Divisiones de ancho completo usando HTML5 y CSS3 (responsive)

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

Pregunta

Soy relativamente nuevo en StackOverflow y estoy experimentando algunas dificultades al crear una página web.

Entonces, lo que necesito es un sitio web de una página dividido en diferentes secciones, que sean divs de ancho completo (es decir, 100% del ancho de la pantalla) y sean consecutivos con diferentes colores de fondo.

El problema al que me enfrento es que los divs no ocupan todo el ancho de la pantalla y tienen espacios en blanco no solo a los lados, sino también entre 2 divs.
Además, cuando se reduce el tamaño de la ventana, aumenta la brecha entre divs.

El resultado deseado es el observado en los siguientes sitios web:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

El código que estoy usando es el siguiente:

yo) HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ii) El CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

Por favor dime donde me estoy equivocando

¿Fue útil?

Solución

Demo

html 

<div class="full" id="one">
     <h1>Just something</h1>
</div>
<div class="full" id="two">
     <h1>Just something</h1>
</div>

css 

body, html {
    width: 100%;
    height: 100%;
    margin:0; /* default margin set to 0 */
    padding:0; /* default padding set to 0 */
}
.full {
    width: 100%;
}
#one {
    background-color: gray;
    height: 50%; /* whatever you want to give height */
}
#two {
    background-color: #f13;
    height: 50%; /* whatever you want to give height */
}
.full h1 {
    margin:0; /* default margin of h1 tag set to 0 */
    padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}

Otros consejos

Violín de demostración

Para eliminar el margen/relleno predeterminado en la ventana gráfica (que le proporciona el espacio en blanco), debe agregar el siguiente CSS:

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}

y cambio:

.full{
  width= 100%;
}

a:

.full{
  width:100%;
}

Los pares de propiedad/valor de estilo CSS están separados por dos puntos : y no un igual =

¿Ha intentado ajustar el margen y el relleno 0 en su totalidad y también en la etiqueta del cuerpo? como 

 .full
{
    width :100%;
   margin:0px;
   padding:0px;
     }

De manera similar, su encabezado también toma un poco de margen, así que configure el margen de encabezado según sea necesario. Para mejor, consulte este enlace w3schools

Tienes que cambiar los márgenes del cuerpo y H1, ya que tienen valores predeterminados en el navegador. Lo he arreglado para ti en este violín: 

h1{
  margin: 0px;
}
body{
  border: 0px;
  padding: 0px;
  margin: 0px;
}

http://jsfiddle.net/pwlgb/

El problema es que no le das todo el div un color de fondo, sino solo el texto.

Si tiene una frontera, puede ver el tamaño real del div y llenará todo el div que el color.

Echa un vistazo al violín que hice para eso 

 border: 1px solid black;

http://jsfiddle.net/2h4kq/

Puede configurar el borde a 0px para que no se muestre y le dará el resultado correcto

Las demostraciones a las que se vincula no utilizan divs de ancho completo.En realidad usan un ancho completo. <section> elemento que tiene el color de fondo establecido.

Luego, tienen una fila interior. <div> que luego tiene un contenedor y una columna <div>.Entonces, en el ejemplo de Freelancer se ve así:

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>

Muestra del CSS:

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

Descarga esa plantilla, usa Oreja, y juega con él para conseguir el aspecto que deseas.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top