位置固定且宽度 25% 未采用正确宽度答案

【问题标题】：Position fixed and width 25% not taking correct width位置固定且宽度 25% 未采用正确宽度
【发布时间】：2017-05-16 09:42:01
【问题描述】：

我有两个 div。外部 div 占 25%。并且内部 div 位于底部 (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) 但这并不占 25%。

我正在为这个 div 添加边框。因此，由于宽度的原因，显示了一个空白。

HTML：

<div id="main-div">
    <div id="outer-div">
        <div id="div-1"></div>
        <div id="div-2">
            <div id="inner-div"></div>
        </div>
    </div>
</div>

CSS：

#main-div{
    height: 100%;
    width: 100%;
    display: table;
}
#outer-div {
    width: 100%;
}
#div-1, #div-2 {
    width: 100%;
}
#inner-div {
    position: fixed; 
    bottom: 0; width: 25%; 
    border-top: 1px solid red;
}

如何将 25% 的宽度精确应用到位置固定的inner-div？

更新在评论中添加了 js fiddle

【问题讨论】：

这似乎工作正常。你能在它不存在的地方做一个小提琴吗？
jsfiddle.net/uur2h5w3/3 外部 div 和内部 div 有 25% 的宽度，但内部 div 似乎有更大的宽度。

标签： html css position width css-position

【解决方案1】：

您需要为浏览器重置正文。出于这个原因，“inner-div”正在占用空间。

body{margin:0;padding:0;}

body{margin:0;padding:0;}
#main-div{
    height: 100%;
    width: 100%;
    display: table;
     background: blue none repeat scroll 0 0;
     border: 1px solid blue;
}
#outer-div {
    width: 25%;
   border: 1px solid green;
}
#div-1 {
  width: 100%;
}
#div-2 {
   display: table;
    height: 0;
    padding-right: 2px;
    width: 100%;
}
#inner-div {
  text-align: center;
    position: fixed; 
    bottom: 0; 
    width: 25%; 
    border-top: 1px solid red;
    padding-bottom: 27px;
    padding-top: 10px;
}

<div id="main-div">
    <div id="outer-div"> //list
        <div id="div-1"> //parent-scrol
        <div id="div-2"> //scroll
            <div id="div-3"> //inner-list
              <div id="inner-div">wefffef</div> //create-new
            </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

你可以使用下面的css

#inner-div {
    box-sizing: border-box;
}

您可以查看更新的fiddle

【讨论】：

我不认为这很重要，因为他没有为<div>设置任何侧边框
您能否分享任何小提琴链接，以便我们确定实际问题。
jsfiddle.net/uur2h5w3/3 外部 div 和内部 div 有 25% 的宽度，但内部 div 似乎有更大的宽度。

【解决方案3】：

固定位置相对于浏览器窗口，因此百分比值将相对于元素 (http://www.w3schools.com/cssref/pr_class_position.asp)。虽然实验性的position:sticky 可能会完成您的需要，因为它是相对于视口（父相对元素）的。

【讨论】：

【解决方案4】：

inner-div 的宽度大于outer-div 的真正原因是inner-div 应用了position: fixed。现在，当您应用position: fixed 时，它会使元素位置相对于视口。

因此，在这种情况下，inner-div 相对于应用了一些用户代理边距样式的body。为了使它们具有相同的宽度，请将margin: 0 应用于正文。

另外，将box-sizing: border-box 应用于outer-div 以排除宽度中的边框。

我已经为你更新了小提琴。所以两个 div 的宽度相同。

https://jsfiddle.net/nashcheez/uur2h5w3/4/

【讨论】：

【解决方案5】：

删除你的身体边缘。这个问题是因为你没有移除你的身体margin你可以简单地解决这个问题

body {
 margin:0;
}

body {
	margin:0;
}
#main-div{
    height: 100%;
    width: 100%;
    display: table;
    }
#outer-div {
    width: 100%;
    }
#div-1, #div-2 {
    width: 100%;
    }
#inner-div {
    position: fixed; 
    bottom: 0; width: 25%; 
    border-top: 1px solid red;
}

<body>
<div id="main-div">
  <div id="outer-div">
    <div id="div-1"></div>
    <div id="div-2">
      <div id="inner-div"></div>
    </div>
  </div>
</div>
</body>

【讨论】：