Question

我在标题和其他div方面存在一些问题，原因是我获得了额外的空间我不想使用overflow:hidden，我想要移除空间，而不是隐藏它..我试图设置身体和html高度，但它也不起作用，也许我必须处理position:

＆＃13;

html {
    height: 100%;
}
#header {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background:#D3790B;
    border-bottom: 2px solid black;
}

#chater{
    position: absolute;
    left: 0px;
    top: 52px;  /* distanta dintre header si chatbar*/
    bottom: 0px;
    width: 250px;
    height:100%;
    opacity: 1;
    background-image:url("../images/1.png");;
    border-right: 2px solid #D3790B;
}

#navtab {
    position: absolute;
    top:52px; /* distanta dintre header si navtab*/
    left:252px;
    width: 73px;
    height:100%;
    background-image:url("../images/1.png");;
    bottom:0px;

}

.tab {
    height:78px;
    width: 78px;
    display:flex;

}

#slidebar {
    position: absolute;
    width: 4px;
    height: 78px;
    background-color: darkorange;
    border-radius: 2px;
}

#slider {
    width:4px;
    height:100%;
    background: black;
    position:absolute;
    left:325px;
    top:52px;


}

.icons {
    padding-top: 20px;
    padding-left: 23px;
    top:25px;
    width:35px;
    height:35px;
}

.ctab {

    position:absolute;
    top:52px;
    left:329px;
    height:100%;
    width:100%;
    display:none;
}

.selected {
    display: block;
    display: initial;
    position:absolute;
}

＆＃13;

<div id="header"></div>
<div id="chater"></div>
<div id="slider"><div id="slidebar"></div></div>
<div id="navtab">
    <div class="tab c1"><img src="/images/icons/jackpot.png" class="icons"></div>
    <div class="tab c2"><img src="/images/icons/mines.png" class="icons"></div>
    <div class="tab c3"><img src="/images/icons/roll1.png" class="icons"></div>
    <div class="tab c4"><img src="/images/icons/wallet.png" class="icons"></div>
    <div class="tab c5"><img src="/images/icons/transfer.png" class="icons"></div>
</div>
<div class="ctab tab_1 selected"> Content 1</div>
<div class="ctab tab_2"> Content 2</div>
<div class="ctab tab_3">Content 3</div>
<div class="ctab tab_4">Content 4</div>
<div class="ctab tab_5">Content 5</div>

＆＃13;

https://jsfiddle.net/gtq5co2a/

Answer 1

当你有边框或填充时，那些添加到元素的宽度（即，默认情况下width只是谈论“内部东西”的宽度 - 实际内容区域。）

您想要添加：

box-sizing: border-box;

使用边框设计模型，width描述整个宽度，包括填充和边框，以及内容剩余的剩余内容。

Answer 2

问题在于您的

<div class="ctab tab_1 selected"> Content 1</div>

如果您注释掉绝对位置和左侧值

.ctab {
   /*position: absolute;*/
   top: 52px;
   /* left: 329px; */
   height: 100%;
   width: 100%;       
}

然后额外的空间消失了。

我不明白你为什么绝对定位几乎每一个元素 - 看起来你似乎已经让自己陷入了比必要更多的麻烦。

修改

这是一个没有额外空间的小提琴 https://jsfiddle.net/f81py7ky/2/

除了上述更改外，我还评论了您选择的课程。你的内容没有显示，但现在你知道你的罪魁祸首是什么，虽然我仍然认为所有的绝对位置对你来说都是一个问题。

额外宽度和高度100％

2 个答案: