Question

我有一个宽度为40％的相对div。之后有一个固定的div需要继承这个宽度。

所以我将我的html文档设置为：

<div class="sidebar"></div>
     <div class="maincontent">
        <div class="fixed--wrapper">
           <div class="fixed--header">
        </div>
     </div>
</div>

我的css：

.sidebar {
   width: 20%;
   height: 100vh;
   overflow: hidden;
   position: fixed;
   background-color: #000;
   color: #fff;
   float: left;
}

.maincontent {
    float: right;
    position: relative;
    width: 80%;
    background-color: #D00;
    height: 300px;
}

.fixed--wrapper {
    width: 40%;
    position: relative;
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    height: 100%;
    overflow-y: scroll;
    background-color: #E00;
}

.fixed--header {
   height: 60px;
   width: inherit;
   position: fixed;
   z-index: 2;
   background-color: #fff;
}

现在问题出现了我的固定标题比固定包装大8％。为了说明这个观点，可以使用以下小提琴：https://jsfiddle.net/zj0Lpu0q/1/

我希望我的固定标题也是40％。

旁注：我知道有关此问题的数量很安静，但我找不到一个具有宽度百分比定义的相对div。因此我创造了这个新问题。如果你能把我联系到另一个答案，我也很高兴。

Answer 1

尝试将您的CSS替换为此

.fixed--wrapper {
width: 40%;
position: relative;
float: left;
border-right: 1px solid rgba(0, 0, 0, 0.2);
height: 100%;
overflow-y: scroll;
background-color: #E00;}

.fixed--header {
height: 60px;
position:absolute;
width:100%;
z-index: 2;
background-color: #fff;}

固定div继承相对div的宽度

1 个答案: