Divisioni di larghezza completa che utilizzano HTML5 e CSS3 (reattivo)

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

  •  02-01-2020
  •  | 
  •  

Domanda

Sono relativamente nuovo per impilarti e sto vivendo alcune difficoltà mentre fai una pagina web

Quindi ciò che ho bisogno è un sito Web di una pagina diviso in diverse sezioni, che sono divs a larghezza completa (I.e 100% larghezza dello schermo) e sono consecutivi con diversi colori di sfondo.

Il problema che sto affrontando è che i div non prendono la larghezza completa dello schermo e hanno spazio bianco non solo sui lati, ma anche tra 2 divs
Inoltre, quando le dimensioni della finestra si riducono, il divario tra divs aumenta

Il risultato desiderato è come osservato nei seguenti siti Web:

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

Il codice che sto usando è il seguente:

i) 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) Il CSS: 

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

Per favore, dimmi dove sto andando storto

È stato utile?

Soluzione

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 */
}
.

Altri suggerimenti

DEMO Fiddle

Per rimuovere il margine / imbottitura predefinito sul viewport (che ti offre lo spazio bianco), è necessario aggiungere il seguente CSS: 

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

e cambia: 

.full{
  width= 100%;
}
.

A: 

.full{
  width:100%;
}
.

CSS Style Property / Value Pairs è separato con un colon : e non è uguale a =

Hai provato a impostare il margine e l'imbottitura 0 per intero e anche nel tag corporeo come 

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

Allo stesso modo la tua intestazione prende anche un po 'di margine, quindi impostare il margine della rubrica come richiesto. Per favore, consultare questo link w3schools

È necessario modificare i margini del corpo e H1, poiché hanno valori predefiniti nel browser. L'ho risolto per te in questo violino: 

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

http://jsfiddle.net/pwlgb/

Il problema è che non dai all'intero div un colore di sfondo ma solo il testo.

Se annunci un bordo puoi vedere la dimensione reale del div e riempirà l'intero div con il colore.

Dai un'occhiata al violino che ho fatto per questo 

 border: 1px solid black;
.

http://jsfiddle.net/2h4kq/

È possibile impostare il bordo su 0px in modo che non sia mostrato e ti darà il risultato giusto

La demo è che ti colleghi a non usare diversi div.In realtà usano un elemento <section> a larghezza totale che ha il colore di sfondo impostato su di esso.

Quindi, hanno una riga interna <div> che ha quindi un contenitore e una colonna <div>.Quindi nell'esempio freelancer sembra questo: 

<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>
.

Campione del CSS: 

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

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

Scarica quel modello, utilizza bootstrap e giocare con esso per ottenere il look desiderato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top