HTML5 / CSS3: макет высотой 100% для мобильных устройств с двумя элементами div в качестве кнопок и без переполнения

Question

Я хочу реализовать мобильную раскладку с двумя элементами или кнопками, которые заполняют всю страницу на 50-50% ( РЕДАКТИРОВАТЬ: друг под другом) .Теперь, когда я делаю это с этим кодом

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

section {
    height: 50%;
}

section>div {
    height: 100%;
    border: 1px solid black;
    margin: 10px;
}

<section>
    <div>text1</div>
</section>
<section>
    <div>text2</div>
</section>

, страница слишком высока ... Неудивительно, что поле в 10 пикселей и граница в 1 пиксель увеличивают div ... Также div-обертка сзаполнение в 10px не решит проблему.

Как я могу реализовать этот макет, где страница не прокручивается (не переполняется), а высотой 100%, с двумя кнопками, заполняющими всю страницу (каждая на 50%или 70% - 30% или около того) в то время как сама кнопка имеет поле или отступ, чтобы получить небольшое пространство для границы страницы и, например, сплошную границу 1px?

Заранее спасибо

^ x3ro

Answer 1

Чтобы сделать это еще проще, не могли бы вы просто использовать CSS-размеры окна - что будет поддерживаться в большинстве мобильных браузеров ... (я включил префиксы поставщиков для примера).

См. Пример здесь

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    height: 50%;
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

section div {
    height: 100%;
    background-color: #333;
    border: 1px solid orange;
    color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

Свойство размеров окна гарантирует, что на высоту и ширину элемента не влияют границы, отступы или поля.

Answer 2

Я бы прочитал эту статью о дизайне для мобильных устройств , если это то, для чего вы разрабатываете (есть дополнительные ссылки внизу страницы, на которые вы должны следовать).

Идля вашего макета вы имеете в виду что-то вроде этого ?Я бы рекомендовал использовать абсолютное позиционирование при создании таких проектов.Это делает все намного проще и не требует компоновки потока.

Answer 3

Это решение, которое я искал: http://jsfiddle.net/WWcfm/10/

Благодаря примеру кода Codemonkey, разместив два бокса рядом друг с другом, я понял, как их установитьдруг под другом.

Спасибо!

# РЕДАКТИРОВАТЬ: Внимание!

Вам нужно будет использовать normalize.css .В противном случае это выглядело бы иначе на вашем сайте!