100% – devfrontend.info

Pas totalement valide car ajoute un léger scroll horizontal

Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.

width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;

1
2
3
4
5
6

width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

Un *tain d’exemple qui marche:

Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.

<div class="staticBlock staticBlock-oad"> <div class="full-width"> <div class="container"> <div class="row"> <div class="col"> <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" /> </a> <p><?= __('Opti tagline'); ?></p> <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <?= __('Access Opti'); ?> </a> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="staticBlock staticBlock-oad">
    <div class="full-width">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" />
                    </a>
                    <p><?= __('Opti tagline'); ?></p>
                    <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <?= __('Access Opti'); ?>
                    </a>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-4"></div>
            </div>
        </div>
    </div>
</div>

.staticBlock { &-oad { background-color: #eee; .full-width { position: relative; padding-top: 15px; padding-bottom: 15px; &:before, &:after { z-index: -1; top: 0; display: block; content: ""; position: absolute; width: 50%; height: 100%; background-color: #eee; } &:before { left: -50%; } &:after { right: -50%; } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.staticBlock {
  &-oad {
    background-color: #eee;
    .full-width {
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
      &:before,
      &:after {
        z-index: -1;
        top: 0;
        display: block;
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        background-color: #eee;
      }
      &:before {
        left: -50%;
      }
      &:after {
        right: -50%;
      }
    }
  }
}

Une alternative intéressante

Notamment si l’élément doit se retrouver en sticky à un moment donné.

@media screen and (min-width: @screen-lg-min) { .refinement-facets-list.affix { width: 1200px; z-index: 1000; border-bottom: 1px solid #ededed; background: @page-background-color; &:before, &:after { content: ""; display: block; position: fixed; width: 50%; height: 51px; border-bottom: 1px solid #ededed; background: @page-background-color; } &:before { left: -50%; } &:after { right: -50%; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@media screen and (min-width: @screen-lg-min) {
  .refinement-facets-list.affix {
    width: 1200px;
    z-index: 1000;
    border-bottom: 1px solid #ededed;
    background: @page-background-color;
    &:before,
    &:after {
      content: "";
      display: block;
      position: fixed;
      width: 50%;
      height: 51px;
      border-bottom: 1px solid #ededed;
      background: @page-background-color;
    }
    &:before {
      left: -50%;
    }
    &:after {
      right: -50%;
    }
  }
}

Solution moderne avec la propriété CSS box-sizing :

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Solution obsolète :

<form>
  <button>Ok</button>
  <div class="input-wrapper">
    <input type="text" />
  </div>
</form>

<form>

</div>

</form>

button { 
  float: right;
}
.input-wrapper {
  overflow: hidden;
  padding-right: 15px;
}
input {
  width: 100%;
}

button {

float: right;

}

.input-wrapper {

overflow: hidden;

padding-right: 15px;

}

input {

width: 100%;

}

Articles récents

Catégories

Archives

Méta

Étiquette : 100%

[CSS] Un background off-container

Pas totalement valide car ajoute un léger scroll horizontal

Un *tain d’exemple qui marche:

Une alternative intéressante

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS `box-sizing` :

Solution obsolète :

Pas totalement valide car ajoute un léger scroll horizontal

Un *tain d’exemple qui marche:

Une alternative intéressante

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Solution moderne avec la propriété CSS `box-sizing` :