У меня есть два divs, содержащихся в большом div, как показано ниже:

<div class="content-container">
    <div id="content">
    Bunch of text ... omitted
    </div>

    <div id="sidebar">
    </div>
</div>

CSS, соответствующие этим двум, следующие (немного отредактированы по длине):

#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}

#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}

.content-container {
position: relative;
width: 978px;
height: 1060px;
}

Я прочитал, что атрибут ширины не включает отступы. Когда я загружаю страницу в Chrome и проверяю элементы, content имеет ширину 705 вместо ожидаемых 720. Тем не менее, sidebar имеет правильную ширину 198 пикселей. У кого-нибудь есть объяснение?

enter image description here

1
Abundance 31 Дек 2015 в 05:58

2 ответа

Лучший ответ

У кого-нибудь есть объяснение?

Это из-за полосы прокрутки (в результате overflow: auto).

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

В примере jsFiddle, который вы предоставили, вы заметите, что после удаления полосы прокрутки ширина содержимого в Chrome равна 717px. При использовании полосы прокрутки 15px будет вычтено из ширины содержимого (в результате получится 702px).

1
Josh Crozier 31 Дек 2015 в 03:47

Попробуйте очистить любые возможные поля или отступы по умолчанию для родительского div:

.content-container {
  margin:0px; 
  padding:0px;
}
0
Shaher Jamal Eddin 31 Дек 2015 в 03:03