Тело CSS выше при добавлении маржи

У меня есть страница DIV #, если я добавлю край сверху внезапно, появится полоса прокрутки, хотя элемент не больше тела. Как я могу получить прокрутку?Тело CSS выше при добавлении маржи

(см Fiddle)

Мой HTML

<html> 
<body> 
<div id="page"> 
    I am a div sized with calc()! 
</div> 

</body> 
</html>

Мой CSS

html, body { 
height:100%; 
} 
body { 
margin:0; 
padding:0 10px 0 10px; 
font-family:helvetica; 
background:black; 
color:yellow; 
} 
#page { 
position:relative; 
min-height:90%; 
min-height:calc(100% - 60px); 
width:100px; 
padding:10px; 
margin:20px auto; 
background-color:rgba(255,255,255,.2); 
}

источник

2014-01-18 JSHelp

Кажется, что элемент на самом деле «больше, чем тело» ... Однако - переполнение-y: скрытое на теле удаляет полосу прокрутки, если вы этого хотите? – sinisake

solution demo

Проблема:

Ваш ДИВ является position ред .... поэтому вы должны применять position ИНГ вместо margin в нужном формате ... использовать left, right вместо margin-left и т.д.

padding:10px; 
margin:20px auto;

Правильный CSS

#page { 
    position:relative; 
    min-height:90%; 
    min-height:calc(100% - 60px); 
    width:100px; 
    padding:10px; 
    margin:0 auto; /*center the div*/ 
    top:20px; /*proper assigned margin to kill v-scrollbar*/ 
    bottom:20px;/*proper assigned margin to kill v-scrollbar*/ 
    background-color:rgba(255, 255, 255, .2); 
}

EDIT

Horizontal scroll would be there потому, что вы установили body отступы в padding:0px 10px 0px 10px;

Если выше обивка снимается there will be no horizontal scroll too `

источник

2014-01-18 13:16:07 NoobEditor

Ops calc кажется правильным, и ему нужен верхний край на div. – Abhitalks

Вот почему я вычислил (100% -60px), что означает, что он составляет всего 100% – JSHelp

@downvoter: пожалуйста, укажите проблему и дайте некоторое время плакату, чтобы улучшить ответ перед тем, как сжать на молниеносную скорость. – Abhitalks

EDIT измененный ответ для равномерного края это немного больше работы, дополнительная обертка ДИВ требуется для установки соответствующие стили CSS fiddle -

HTML

<body> 
    <div class = "dummy"> 
     <div id="page"> 
      I am a div sized with calc()! 
     </div> 
    </div> 
</body>

новый CSS -

html, body { 
    height:100%; 
} 
body { 
    margin:0; 
    padding:0; 
    font-family:helvetica; 
    background:black; 
    color:yellow; 
    display: table; 
    position: absolute; 
    width:100%; 
} 
.dummy{ 
    height:100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
    padding 0 10px 0 10px; 
} 
#page { 
    position:relative; 
    text-align:left; 
    min-height:90%; 
    min-height:calc(100% - 60px); 
    width:100px; 
    padding:10px; 
    margin:20px auto; 
    background-color:rgba(255,255,255,.2) 
}

источник

2014-01-18 13:20:49 Vishal

, это не решение vishal. внимательно посмотрите на эту скрипку.Op хотел иметь единый край сверху и снизу, но, похоже, больше места внизу. – Abhitalks

Хорошо, я неправильно понял, изменит ответ – Vishal

с этим css и разметкой ... u практически изменил все, кроме текста и 'calc()' !! :) – NoobEditor

Проблема: body по умолчанию position:static. Добавление поля к прямому ребенку приведет к его смещению пропорционально независимо от его высоты.

Решение: Обеспечить position:fixed к body, чтобы предотвратить смещение и удалить полосы прокрутки.

Demo: http://jsfiddle.net/abhitalks/mZKC5/18/

CSS:

html, body { 
    height: 100%; width: 100%; 
} 
body { 
    position: fixed; /* important to keep it fixed */ 
    margin: 0; padding: 0px 10px; 
    font-family: helvetica; 
    background: black; color: yellow; 
} 
#page { 
    height: calc(100% - 60px); /* 10+10 padding + 20+20 margin = 60px is ok */ 
    width: 100px; 
    padding: 10px; 
    margin: 20px auto; 
    background-color: rgba(255, 255, 255, .2); 
}

Редактировать: (на @ AWolff-х предложение)

Вышеприведенный пример показывает, является причиной тело свитки, когда маржа применяется к прямому ребенку. Но, поскольку побочным эффектом создания является то, что он больше не будет прокручиваться, даже если вы захотите добавить более относительный контент.

Лучшим решением было бы использовать абсолютное позиционирование для размещения элементов, если вам нужно совершенство пикселя.

Или следовать @NoobEditors предложение использовать относительную positioning вместо margins относительно, потому что это будет по отношению к body в любом случае (даже если он является абсолютным).

источник

2014-01-18 13:53:41 Abhitalks

+1: Черт меня .... 30secs покойный человек ... имел это ... но..крап !!! :) – NoobEditor

Подождите, но тогда тело больше не прокручивается ?! –

@ A.Wolff: Да. Это то, что Оп спросил: «* Как я могу отбросить прокрутку?» « – Abhitalks

Тело CSS выше при добавлении маржи

ответ

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