100% ширина больше родительского div

Я работаю над темой vBulletin, но в списке нитей каждый поток имеет 100% ширины, но потоки также больше, чем их родители, но когда я удаляю границу потоков, они будет соответствовать родительскому div :). поэтому подумайте, что эта проблема находится на границах.100% ширина больше родительского div

Вы можете видеть, что лучше на jsfiddle (нитка белая форма с черной рамкой)

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

источник

2013-08-03 AmirHosein KazemNejad

Проблема здесь состоит в том, что width является размер внутренней области с текстом, и обивка с границей «обернуты» вокруг него. Эта спецификация не имеет смысла, но за ней следуют самые современные браузеры.

Ваш спаситель называется box-sizing: border-box;.

.threadbit .thread { 

    /* ... some stuff ... */ 

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

Посмотрите здесь: jsFiddle

Более подробную информацию об этом свойстве here и here.

источник

2013-08-03 09:31:00 MightyPork

Да, вы правы, границы выталкивают «ширину» элемента. По умолчанию используется box-sizing современных браузеров. Это может быть изменен в большинстве с заявлением, как:

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

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

EDIT

Это было время, так как мой первоначальный ответ и браузер поддержка слегка изменилась. Firefox 29, Chrome 10, Safari 5.1 и Internet Explorer 8 поддерживают всю поддержку box-sizing, но в некоторых версиях есть несколько известных проблем.

Полный/уточненный список доступен на caniuse.com однако здесь несколько из них я нашел важным с сайта:

IE8: игнорирует box-sizing: border-box, если используется мин/макс ширина/высота
IE8: min-width свойство применяется к content-box даже если box-sizing установлен в border-box
IE9: ширина полосы прокрутки вычитается из ширины элемента при установке на position: absolute и либо overflow: auto или overflow-y: scroll

Поскольку доля рынка для IE8 и IE9, снижения этих вопросов, а другого перечисленных на caniuse будет меньше проблем в будущем.

источник

2013-08-03 09:31:12 Turnerj

мастера Ctrl + C, но он не стилизации в текстовом поле: P @ с помощью http://css-tricks.com/box-sizing/ – MightyPork

Ясно! Не большой поклонник публикации только ссылки на скрипку, а затем редактирование моего ответа кучу раз. ;) Получил некоторый элемент практики и обучения для человека, задающего этот вопрос. – Turnerj

О да, но, конечно, не помешало бы заменить «textarea» на «.threadbit .thread» в скопированном фрагменте? – MightyPork

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

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

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

Вот ссылка для коробчатога проклейки свойства http://www.paulirish.com/2012/box-sizing-border-box-ftw/

источник

2013-08-03 09:56:57

100% ширина больше родительского div

ответ

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