当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS Width doesn't match up in page

问题描述:

I have two divs contained within a larger div as follows:

<div class="content-container">

<div id="content">

Bunch of text ... omitted

</div>

<div id="sidebar">

</div>

</div>

The css corresponding to these two are as follows (slightly edited for length):

#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;

}

I have read that the width attribute does not include padding. When I load the page up in Chrome and inspect the elements, content has a width of 705, instead of the expect 720. However, sidebar has the correct width of 198px. Does anyone have an explanation?

网友答案:

Does anyone have an explanation?

It's because of the scrollbar (resulting from overflow: auto).

There are some cross-browser inconsistencies related to the scrollbar and how it is included in the width calculations. In Chrome and Safari, the width of the scrollbar isn't included in the content width, whereas in Firefox and IE, the width of the scrollbar is included in the content width.

In the jsFiddle example that you provided, you will notice that the content width is 717px in Chrome after removing the scrollbar. With the scrollbar, 15px will be subtracted from the content width (resulting in 702px).

网友答案:

try to clear any possible default margin or padding for the parent div:

.content-container {
  margin:0px; 
  padding:0px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: