Pleine largeur divisions à l'aide de HTML5 et CSS3 (responsive)

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

  •  02-01-2020
  •  | 
  •  

Question

Je suis relativement nouveau à StackOverflow et éprouve quelques difficultés tout en faisant une page web

Donc ce que j'ai besoin est une page, un site divisé en différentes sections, qui sont toute la largeur de la vrd (j'.e 100% de la largeur de l'écran)et sont consécutives avec différentes couleurs d'arrière-plan.

Le problème, je suis confronté est que les divs ne pas prendre toute la largeur de l'écran et le blanc de l'espace sur les côtés, mais aussi entre les 2 divs
Aussi, lorsque la taille de la fenêtre réduit, l'écart entre les divs augmente

Le résultat souhaité est observée dans les sites web suivants:

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

Le code que j'utilise est comme suit:

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) Le CSS:

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

S'il vous plaît ne me dire où je suis mal à l'

Était-ce utile?

La solution

démo

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

Autres conseils

Démo De Violon

Pour supprimer la marge par défaut/rembourrage sur la fenêtre d'affichage (qui est de vous donner l'espace), vous devez ajouter le code CSS suivant:

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

et le changement:

.full{
  width= 100%;
}

pour:

.full{
  width:100%;
}

De style CSS propriété/valeur paires sont séparées par une virgule : et pas d'égal =

Avez-vous essayé de définir la marge et le rembourrage 0 en plein air et dans la balise de corps aussi comme 

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

De même, votre titre prend également une certaine marge afin de définir la marge de la position requise. Pour mieux, consultez ce lien w3schools

Vous devez changer les marges du corps et de H1, car elles ont des valeurs par défaut dans le navigateur. Je l'ai réparé pour vous dans ce violon: 

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

http://jsfiddle.net/pwlgb/

Le problème est que vous ne donnez pas la couleur de fond de fond, mais seulement le texte.

Si vous annoncez une frontière, vous pouvez voir la taille réelle de la DIV et remplira l'ensemble de la DIV de couleur.

Vérifiez le violon que j'ai fait pour cela 

 border: 1px solid black;

http://jsfiddle.net/2h4kq/

Vous pouvez définir la bordure à 0px afin qu'il ne soit pas affiché et cela vous donnera le bon résultat

La démo que vous reliant à ne pas utiliser toute la largeur de la vrd.Ils utilisent en fait une pleine largeur <section> l'élément qui a la couleur d'arrière-plan fixés sur elle.

Ensuite, ils ont un intérieur en ligne <div> qui dispose alors d'un conteneur et de la colonne <div>.Ainsi, dans le Pigiste exemple, il ressemble à ceci:

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

L'échantillon de la CSS:

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

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

Télécharger ce modèle, il utilise Bootstrap, et jouer avec elle pour obtenir le look que vous voulez.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top