Divisões de largura total usando HTML5 e CSS3 (responsivo)

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

  •  02-01-2020
  •  | 
  •  

Pergunta

Sou relativamente novo no StackOverflow e estou tendo algumas dificuldades ao criar uma página da web

Então, o que eu preciso é de um site de uma página dividido em seções diferentes, que sejam divs de largura total (ou seja, 100% da largura da tela) e sejam consecutivas com diferentes cores de fundo.

O problema que estou enfrentando é que as divs não ocupam toda a largura da tela e possuem espaços em branco não só nas laterais, mas também entre 2 divs
Além disso, quando o tamanho da janela diminui, a lacuna entre os divs aumenta

O resultado desejado é observado nos seguintes sites:

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

O código que estou usando é o seguinte:

e)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) O CSS:

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

Por favor me diga onde estou errando

Foi útil?

Solução

Demonstração

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

Outras dicas

Violino de demonstração

Para remover a margem/preenchimento padrão na janela de visualização (que fornece o espaço em branco), você precisa adicionar o seguinte CSS:

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

e mudar:

.full{
  width= 100%;
}

para:

.full{
  width:100%;
}

Os pares propriedade/valor do estilo CSS são separados por dois pontos : e não um igual =

Você já tentou definir margem e preenchimento 0 na íntegra e na etiqueta corporal também

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

da mesma forma, seu título também ocupa alguma margem, portanto defina a margem do título conforme necessário.para melhor consulte este link w3escolas

É necessário alterar as margens body e h1, pois elas possuem valores padrão no navegador.Eu consertei para você neste violino:

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

http://jsfiddle.net/pWLgb/

o problema é que você não dá ao div inteiro uma cor de fundo, mas apenas ao texto.

se você anunciar uma borda, poderá ver o tamanho real do div e ele preencherá todo o div com cor.

confira o violino que fiz para isso

 border: 1px solid black;

http://jsfiddle.net/2h4kQ/

você pode definir a borda para 0px para que ela não seja mostrada e isso lhe dará o resultado correto

A demonstração à qual você está vinculando não está usando divs de largura total.Na verdade, eles usam uma largura total <section> elemento que tem a cor de fundo definida.

Então, eles têm uma fileira interna <div> que então tem um contêiner e uma coluna <div>.Então, no exemplo do Freelancer, fica assim:

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

Amostra do CSS:

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

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

Baixe esse modelo, ele usa Inicialização, e brinque com ele para obter a aparência desejada.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top