pourcentage de la largeur dans le css ne fonctionne pas

J'ai été en utilisant un moyen de définir ma largeur de la propriété en css avec la fenêtre d'affichage de la mesure, le code css:

#content {
    position: absolute;
    background-color: white;
    width: 100vw;
    top: 115px;
    bottom: 30px;
    display: table;
    z-index: 0;
}

Quand j'ai changé la largeur de la largeur: 100vw; width: 100%; mon code n'est pas de travailler plus. Je veux changer de pourcentage de la mesure depuis que j'ai découvert fenêtre d'affichage ne fonctionne pas sur Android < 4.4

Autres code HTML et css:

HTML

  <div id="mainslide"> 
    <section id="aanbod"> 
      <div id="content" align="center">
        <table class="tablestyleorchideeaanbod">
          <tr>
            <td class="titel" width="85%">Orchidee</td>
            <td class="beschrijving" width="15%" rowspan="1" align="right">21 aug</td>
          </tr>
          <tr>
            <td class="soort">Cherry red</td>
            <td width="15%" rowspan="2" align="right"><svg height="30" width="30">
              <circle cx="15" cy="15" r="12" fill="#ff4641" />
              </svg></td>
          </tr>
          <tr>
            <td class="beschrijving"><span class="width">Aantal: 100 stuks</span>Grootte: 3 Liter</td>
          </tr>
        </table>
      </div>
    </section>

    <section>
    ..............
    </section>

    <section>
    ..............
    </section>
  </div>

CSS

#mainslide {
    position: absolute;
    left: 100%;
    z-index: 1;
}
#aanbod {
    position: absolute;
    left: 0px;
}
.tablestyleorchideeaanbod {
    width: 100%;
    padding: 12px;
    padding-left: 8%;
    padding-right: 8%;
    border-bottom-width: 1px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #8cca49;
}

Est-il vrai de le faire "à gauche: 100%;"? Pourquoi ne pas "right: 0px;" ?
left:100%; est à l'extérieur de votre écran, utilisez right:0; à la place.
Je l'ai changé mais ça va casser mon script jQuery. Donc je suppose que j'ai fait sur le but. Toujours le problème n'est pas là. Le problème a commencé quand j'ai changé la largeur de l'id du contenu de 100vw à 100%. Je n'ai pas changer quoi que ce soit d'autre dans mon code. Je ne peux pas comprendre pourquoi c'est le problème quand je change de fenêtre d'affichage en pourcentage

OriginalL'auteur Kevin Ammerlaan | 2015-02-17

5

Faire les positions relative au lieu de absolute , puis width:100% devrait fonctionner
```
#mainslide {
    position: relative;
    left:100%
    z-index: 1;
}
#aanbod {
    position: relative;
    left: 0px;
}
.tablestyleorchideeaanbod {
    width: 100%;
    padding: 12px;
    padding-left: 8%;
    padding-right: 8%;
    border-bottom-width: 1px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #8cca49;
}
#content {
    position: absolute;
    background-color: white;
    width: 100%;
    top: 115px;
    bottom: 30px;
    display: table;
    z-index: 0;
}
```
De travail exemple: http://jsfiddle.net/duvx5qLp/

Laissez-moi savoir si vous êtes à la recherche de quelque chose d'autre 🙂

Jusqu'à présent, vous êtes mon héros! U peut m'expliquer pourquoi cela fera la différence?
content d'avoir pu aider , je vais essayer de mon mieux pour vous dire la différence en bref les Éléments à positionnement absolu sont placés par rapport à la première parent avec une relative ou absolue de positionnement. Tout dépend de ce que les articles contiennent l'absolu placé élément.
Une autre différence est que les éléments en position absolue sont retirés de la normale de la circulation des documents et par rapport les éléments positionnés ne le sont pas. Donc, si vous avez trois <div>s sur le DESSUS les uns des autres et que vous définissez le moyen pour le positionnement absolu, le haut et le bas <div>s vont s'affaisser.
la marque de cette réponse si j'ai aidé 🙂 , vous devez être en train de faire une faveur
également un grand article à : css-tricks.com/...

OriginalL'auteur Mohit Bhasi

Vous devez vous connecter pour publier un commentaire.