J'ai besoin d'un max de marge propriété CSS, mais il n'existe pas. Comment pourrais-je faire semblant?

Je suis en train de faire une page simple avec les caractéristiques suivantes:

  1. Son corps doit être d'au moins 60em de large.
  2. Ses marges gauche et droite doit être aussi large et à plus 3em large.
  3. Lorsque la fenêtre du navigateur est redimensionnée, le document de marges devraient être redimensionnée afin que le navigateur de la fenêtre de la barre de défilement horizontal couvre la moins large gamme possible.

Transformer ces exigences en un problème de programmation linéaire, nous obtenons:

DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document's body)
LRMG = (width of the document's left and right margins)
HSCR = (range of the browser window's horizontal scroll bar)

OBJECTIVE:
MIN HSCR   /* Third requirement */

CONSTRAINTS:
HSCR = BODY + 2*LRMG - BRWS  /* From the definition of how a browser's
                              * horizontal scrollbar works. */
BODY >= 60  /* First requirement */
LRMG <= 3   /* Second requirement */
LRMG >= 0   /* Physical constraint, margins cannot be negative */
HSCR >= 0   /* Physical constraint, scroll bars cannot have negative ranges */

La résolution du programme linéaire, nous obtenons:

BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ?  0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2

(Désolé pour le percement de mathématiques, mais je ne suis pas convaincu que les explications en anglais a été assez clair.)


Maintenant de retour à la page réelle. Après googler pour trouver ce que je pouvais faire avec le CSS, j'ai réussi à mettre en œuvre les deux premiers besoins à l'aide du code suivant:

body {
  min-width: 60em; /* First requirement */
}

/* The document's body has only two children, both of which are divs. */
body > div {
  margin: 0 3em;    /* Second requirement, but in a way that makes */
  max-width: 100%;  /* it impossible to satisfy the third one. */
}

Si le CSS avait un max-margin des biens, à satisfaire à toutes les exigences serait facile:

body > div {
  max-margin: 0 3em;
  max-width: 100%;
}

Mais, bien sûr, max-margin n'existe pas. Comment pourrais-je faire semblant?

  • javascript hors de question?
  • N'espère pas, parce que c'est la seule façon qu'il va le faire 😉
  • Êtes-vous essayer de créer une mise en page centrée? c'est à dire un div qui est de largeur fixe sage, mais reste dans le centre même lorsque le navigateur est redimensionnée?
  • Oui. Je sais comment le faire avec du JavaScript, mais c'est quelque chose que JavaScript ne devrait pas être obligatoire pour.
  • J'ai déjà un centré mise en page. Ce que je veux, c'est que à la fois le corps du document et le document marges de l'être redimensionnée dans une manière sensible.
  • avez-vous un lien vers une démo de la page, parce que je ne suis pas encore au clair sur exactement ce que vous essayez d'atteindre?
  • Si je suis reding ce corectly il est en train de créer une mise en page centrée, où la largeur est variable, mais un minimum de 60em. aditionally le contenu doit avoir une marge de 3em qui est de rétrécir si la fenêtre du navigateur n'est pas assez large.
  • Exactement! Pourquoi ne pouvais-je pas dit de cette façon?
  • probablement parce que vous n'avez pas assez à boire 🙂
  • Pouvez-vous utiliser css3 media queries?
  • Probablement aussi parce que je suis trop mathématiquement incliné pour mon propre bien.
  • J. Lee: Ce sont CSS3 media queries? 😮
  • ok ça fait beaucoup plus de sens maintenant. Ainsi, lorsque l'utilisateur se développe le navigateur, vous dites, en effet, la centrale div va s'agrandir (mais gardez 3em marges de chaque côté)? Et que le navigateur est réduite (largeur sage), la centrale div doit également reculer, MAIS pas moins puis 60em. Et il peut même manger dans la 3em marges de afin de tenter de maintenir le minimum 60em?
  • Je vous comprends tout à fait que je suis aussi comme ça. J'ai aussi remarqué que je peux m'exprimer plus clairement à l'homme quand j'ai un couple de bières en moi (disclaimer: je ne suis pas préconisent de boire, je suis juste en indiquant une observation)
  • Zut, je souhaite que je pourrais downvote à ma propre question, parce que c'est totalement stupide.

InformationsquelleAutor pyon | 2011-06-08