Я пытаюсь сделать простую страницу со следующими характеристиками:
- Его тело должно быть не менее 60 м.
- Его левое и правое поля должны быть одинаково широкими и не более 3-х кратных.
- При изменении размера окна браузера поля документа должны быть изменены таким образом, чтобы горизонтальная полоса прокрутки окна браузера охватывала наименее широкий диапазон.
Преобразуя эти требования в задачу линейного программирования, получим:
DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document body)
LRMG = (width of the document left and right margins)
HSCR = (range of the browser window 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 */
Решая эту линейную программу, получим:
BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ? 0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2
(Извините за скучную математику, но я не уверен, что оригинальное объяснение на английском языке было достаточно ясным.)
Теперь вернемся к фактической странице. После поиска в Google, чтобы найти то, что я мог сделать с CSS, мне удалось реализовать первые два требования, используя следующий код:
body {
min-width: 60em; /* First requirement */
}
/* The document 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. */
}
Если CSS имел свойство max-margin, удовлетворяющее всем требованиям, было бы легко:
body > div {
max-margin: 0 3em;
max-width: 100%;
}
Но, конечно, max-margin не существует. Как я мог его подделать?