Как добавить верхнее/нижнее поле процента от высоты в CSS

Что произойдет, если клиент хочет создать идеальный дизайн пикселя или в этом случае «процент совершенен», как этот пример?Как добавить верхнее/нижнее поле процента от высоты в CSS

enter image description here

Полный контейнер 100% высоты, так что сумма всех DIVS и пространств приводит к высоте 100%.

Проблема заключается в том, что я попытался добавить пробелы, используя margin-bottom в divs, но понял, что процентные поля не представляют желаемое значение внутри полного контейнера высотой 100%.

Единственное решение, которое я знаю, использует divs с% height вместо полей. Но я хочу сделать более чистый html. Есть ли другая альтернатива этому?

Дополнительная информация: Я использую телефонную трубку + ионный, мобильный дизайн.

источник

2015-02-04 aluknot

Сначала вы должны установить корневой элемент height:100vh

Тогда используйте :nth-child, чтобы установить высоту и границу каждого деления

*{box-sizing: border-box} 
 
:root{width: 100vw; height: 100vh; text-align: center} 
 
body{padding: 0; margin:0} 
 
div{ 
 
    display: block; 
 
    background: #333; 
 
    width: 480px; 
 
} 
 

 
div:first-child, div:nth-child(2){ 
 
    height: 15vh; 
 
    margin: 0 0 2.5vh 0 
 
} 
 

 
div:nth-child(3){ 
 
    height: 20vh; 
 
    margin: 0 0 5vh 0 
 
} 
 

 
div:nth-child(4){ 
 
    height: 30vh 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

источник

2015-02-04 16:15:12

Я не понимаю, почему здесь есть нисходящая волна. В двух других ответах вопрос о заполнении основывается на ширине, но этот должен работать. Он основан на высоте видового экрана, которая кажется, что OP после –

Tambo, я работал над демонстрационной скрипкой, поэтому, пожалуйста, не стесняйтесь использовать это в своем ответе, если хотите: http://jsfiddle.net/c28h58cw/. Я думаю, ваше решение отлично. –

Это действительно приятно @JosephMarikle. Я предпочитаю ваш пост для скрипки, что в качестве ответа ... также приятно из решения Tambo :) – DaniP

-2

можно использовать

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */

, что делает высоту и ширину включать любые заполняющие/границы, имеют вид http://css-tricks.com/box-sizing/

источник

2015-02-04 16:01:25 Billy

нисходящий избиратель, пояснение ..... – Billy

Я не сделал ни слова, но 'box-sizing' не влияет на поля. – user3790069

вы правы и верите в это или нет, я знал это, чтобы нанести прокладку, но, должно быть, имел края, проходящие через мою голову, теперь все отредактированные. – Billy

Я рекомендовал опубликовать мою скрипку в качестве ответа. Итак, вот краткое изложение: проблема, с которой работает OP, заключается в том, что маржа рассчитывается как percent of the width (See "<percentage>") при использовании процентов. Это означает, что margin-bottom: 50% составляет 50% ширины контейнера, а не высоту. Один из способов - использовать vh (высота видового экрана). Это, конечно, ограничено процентом области просмотра, а не контейнером, но пока ваш дизайн по сути является полноэкранным без прокрутки, это возможное решение (кредит для пользователя @Tambo для его первого поиска).

Совместимость также является проблемой (esspecially для IE): http://caniuse.com/#feat=viewport-units

Вот важная часть решения

.small { 
    height: 15%; 
    margin-bottom:2.5vh; 
} 

.medium { 
    height: 20%; 
    margin-bottom:5vh; 
} 

.large { 
    height: 30%; 
    margin-bottom:10vh; 
}

И демо ссылка: http://jsfiddle.net/c28h58cw/

источник

2015-02-04 16:33:30

спасибо и Tambo! – aluknot

Отличный ответ, это ново для меня, рад, что я остановился, чтобы проверить, как это происходит. – Aaron

Да, это очень помогает, я не новичок в CSS, но это ново для меня. Не знаю, почему некоторые люди понижают мой вопрос ... – aluknot

Почему вы не просто используйте арифметику здравого смысла и абсолютное позиционирование? Вам не нужно будет проверять поддержку браузера таким образом.

div { 
 
    background-color: #888; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
div:nth-child(1) { 
 
    top: 0; 
 
    height: 15%; 
 
} 
 
div:nth-child(2) { 
 
    top: 17.5%; 
 
    height: 15%; 
 
} 
 
div:nth-child(3) { 
 
    top: 35%; 
 
    height: 20%; 
 
} 
 
div:nth-child(4) { 
 
    top: 60%; 
 
    height: 30%; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Обратите внимание, что процент верхнего и нижнего полей по сравнению с шириной родительского элемента, а не по высоте. Еще один CSS WTF.

источник

2015-02-04 17:56:12

Как добавить верхнее/нижнее поле процента от высоты в CSS

ответ

Смежные вопросы