Question

我有两个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小提琴

Answer 1

您可以在此下面使用css

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

您可以查看更新的fiddle

Answer 2

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

body {
 margin:0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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/

Answer 4

固定位置相对于浏览器窗口，因此百分比值将相对于＆lt; html＆gt;元素（http://www.w3schools.com/cssref/pr_class_position.asp）。虽然实验position:sticky可能会达到您所需要的，因为它相对于视口（父相对元素）。

Answer 5

您需要重置浏览器的正文。出于这个原因，“内部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>

位置固定，宽度25％，宽度不正确

5 个答案: