Question

短版

为什么95％宽度h1不如95％固定div宽？

我该怎么做才能使h1宽度相同（同时保持div的fixed属性）？

#mobile_wrapper {
  background: #000;
  display: block;
  position: fixed;
  width: 95%;
  white-space: nowrap;
  z-index: 5;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
#mobile_menu {
  background: aqua;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: 60px;
}
#mobile_logo {
  background: red;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: calc(100% - 120px);
  text-align: center;
}
#mobile_logo img {
  max-width: 100%;
  vertical-align: bottom;
}
#mobile_cart {
  width: 60px;
  background: green;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: right;
}
#mobile_cart li {
  display: inline;
  list-style: none;
}
h1 {
  width: 95%;
  background: gold;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
}

<div id="mobile_wrapper">
  <div id="mobile_menu">
    menu
  </div>
  <div id="mobile_logo">
    <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">
  </div>
  <ul id="mobile_cart">
    <li>i</li>
    <li>i</li>
  </ul>
</div>
<h1>
TITLE
</h1>

的jsfiddle

https://jsfiddle.net/rwone/mqqytqwe/

长版

在完成一项相当简单的任务的过程中，我一直在慢慢研究一些*学习机会* - 为移动观看创建一个固定的标题区域。

在相当令人满意的程度上，我学会了：

浮动：
https://youtu.be/xara4Z1b18I
定位（静态，相对，绝对，固定，继承）：
http://alistapart.com/article/css-positioning-101
为什么内联块之间有空格：
https://css-tricks.com/fighting-the-space-between-inline-block-elements
箱上浆：
http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

填充和边框包含在元素宽度中，而不是添加到其中：

图片来源：teamtreehouse.com

很酷我可以在Firebug的布局标签中查看很多这些东西：

但我无法运用我对这些方面的了解来理解：

为什么95％宽度h1不如95％固定div宽？

我该怎么做才能使h1宽度相同（同时保持div的fixed属性）？

Answer 1

首先相对于html定位，第二定位于body。修复是：

body {
  margin: 0;
}

body {
  margin: 0;
}

#mobile_wrapper {
  background: #000;
  display: block;
  position: fixed;
  width: 95%;
  white-space: nowrap;
  z-index: 5;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
#mobile_menu {
  background: aqua;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: 60px;
}
#mobile_logo {
  background: red;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: calc(100% - 120px);
  text-align: center;
}
#mobile_logo img {
  max-width: 100%;
  vertical-align: bottom;
}
#mobile_cart {
  width: 60px;
  background: green;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: right;
}
#mobile_cart li {
  display: inline;
  list-style: none;
}
h1 {
  width: 95%;
  background: gold;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
}

<div id="mobile_wrapper">
  <div id="mobile_menu">
    menu
  </div>
  <div id="mobile_logo">
    <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">
  </div>
  <ul id="mobile_cart">
    <li>i</li>
    <li>i</li>
  </ul>
</div>
<h1>
TITLE
</h1>

Answer 2

尝试将此添加到body元素。

body {
    width:100%;
}

Answer 3

这是因为mobile_wrapper有position: fixed：

https://jsfiddle.net/az77u8c8/

你还没有清理你的花车。应该有一个clear: both的块元素。

Answer 4

与使用div vs h2元素无关。这是因为你的div正在使用固定定位。 position: fixed元素的％值计算为视口的百分比（例如，通常是浏览器宽度，但是在js中调整框架）。

你的H1标签是静态位置，所以百分比宽度基于它的容器宽度，在这种情况下是主体。您可能认为正文与视口的宽度相同，但大多数浏览器会向正文添加一些填充/边距。

如果您选择＆＃39;标准化css＆＃39;在jsfiddle中的选项，这可能会给出你期望的结果。

https://jsfiddle.net/4hnn3skv/

这使用normalize.css来强制执行跨浏览器的一致行为。使用它或css reset通常是个好主意。

Answer 5

宽度：95％
它给出了h1和div

的相同结果

＆＃13;

Instant

＆＃13;

为什么95％宽度h1不如95％固定div宽？

5 个答案: