CSS响应垂直滚动条问题

Question

我目前正在玩bootstraps v2.3.2. media querys（我没有使用bootstraps网格，只是这4个媒体查询）在移动设备和平板设备上测试它们，我注意到我一直在获取水平滚动条我不明白为什么？

基本上我有一个div这CSS：

html { 
    box-sizing: border-box; 
} 

*, *:before, *:after { 
    box-sizing: inherit; 
} 

body{ 
    margin:0; 
    /* height: 3000px; */ /* forced vertical scrollbar */ 
    height: 300px; 
} 

div{ 
    padding: 0 10px; 
    margin: 0 auto; 
    background: aqua; 
    width: 980px; 
    border: 1px solid black; 
    height: 100%; 
} 

/* Large desktop */ 
@media (min-width: 1200px) { 
    div{ 
     background: red; 
     width: 1200px; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
    div{ 
     background: yellow; 
     width: 768px; 
    } 
} 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    div{ 
     background: blue; 
     width: 100%; 
    } 
} 

/* Landscape phones and down */ 
@media (max-width: 480px) { 
    div{ 
     background: green; 
    } 
} 

---

情况时，我用力垂直滚动条：JSBin

但当我不强迫垂直滚动条，我得到了想要的结果：JSBin

---

所以显然是由于垂直滚动条。我发现这个article关于响应式网页设计中的滚动条问题，但我在Chrome和FF中都得到了相同的结果。

---

更新：为寻找的bootstrap v3.3.2源我发现他们有新媒体的质疑，但是，他们不使用最小可能宽度为.container。这是他们的媒体查询：

@media (min-width: 768px) { 
    .container { 
     width: 750px; /* 18px difference */ 
    } 
} 
@media (min-width: 992px) { 
    .container { 
     width: 970px; /* 22px difference */ 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
     width: 1170px; /* 30px difference */ 
    } 
} 

而这里是JSBin。即使当我强制垂直滚动条出现时，这也不会触发水平滚动条。

但是，如果我想使用可能性最小宽度对媒体查询，如：

@media (min-width: 768px) { 
    .container { 
     width: 768px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
     width: 992px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
     width: 1200px; 
    } 
} 

这将触发horizontal scrollbar - JSBin

没有从引导的球员这样做的目的，因为可能存在垂直滚动条？

---

问题：为什么我不能用最小可能宽度在媒体查询时垂直滚动条出现？

我知道这可能是一个新手问题，但如果有人为我澄清这一点，我将不胜感激。

Answer 1

引导媒体Querys

设置媒体查询

引导支持四种介质尺寸：

手机< 768px（8英寸）

片≥768px

桌面≥992px（10.33英寸）

台式机≥1200像素（12。5英寸）

这些不是固定尺寸！

如果你有屏幕具有的768px一个最小宽度的媒体查询应触发。
容器但是设置为768px几乎八方通作出这样的画面溢出

首先所有现代浏览器的所有body元素确实有余量的。
例如：Webkit的浏览器：body {margin: 8px;}因此，如果您的768px元和8和8边距保证金顶你：784px
让你的屏幕是768px（或更少），你的内容是784px这将使它溢出（因为它应该）。 也就是说引导程序集：body {margin:0;}

另一个例子是边界。除非box-sizing不是默认值，边框会将大小添加到您的元素中。虽然大纲在您的元素内设置边框。

的确从引导的球员这样做有目的的，因为possibily，有可能是vertical scrollbar存在？

还有就是一个可能性，但我认为他们将它，因为有一堆的CSS属性的影响大小，所以他们给了错误的保证金可以这么说，以避免像一个水平奇怪的行为滚动条弹出。

问题：为什么我不能在垂直滚动条存在时在媒体查询中使用尽可能最小的宽度？

您可以使用它：Fiddle! 只记得一些浏览器将具有一定宽度的渲染。

Answer 2

结帐小提琴 https://jsfiddle.net/YameenYasin/as4Lmgas/1/

html { 
    box-sizing: border-box; 
} 

*, *:before, *:after { 
    box-sizing: inherit; 
} 

body{ 
    margin: 0; 
} 

div { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    background: blue; 
    height:auto; 
    min-height:300px; // For testing purpose only 
} 
@media (min-width: 768px) { 
    div { 
    width: 750px; 
    background: silver; 
    } 
} 
@media (min-width: 992px) { 
    div { 
    width: 970px; 
    background: yellow; 
    } 
} 
@media (min-width: 1200px) { 
    div { 
    width: 1170px; 
    background: red; 
    } 
} 



<div></div>