Question

我正在为我的网站写一个基本标题。没有什么花哨。固定的顶部栏应该包含几个子div。我无法让细分来操纵它们的形状。下面是我的代码示例和一个有助于我解决此问题的问题。

感谢。

我有一些基本的HTML：

<div id="all">
    <div id="topbar">
        <div id="lnamePlate"></div>
    </div>
</div>

和一些基本的CSS：

html, body {
    margin: 0;
    padding: 0
}

body {
    position: relative
}

#all {
    background-color: white;
    height: 4000px;
    width: 100%;
}

#topbar {
    background-color: yellow;
    position: fixed;
    top: 0%;
    width: 100%;
    height: 150px;
    z-index: 50;
}

#lnamePlate {
    position: relative;
    background-color: purple;
    height: 50%;
    width: 50%;
    z-index: 55;
}

为什么紫色的lnamePlate框不是topBar宽度的50％？请参阅下面的JSFiddle以了解错误。

修改

JSFiddle

Answer 1

我确定它的宽度百分比为50％：

http://jsfiddle.net/prollygeek/vR3AF/130/

#lnamePlate {
    position: relative;
    background-color: purple;
    height: 50%;
    width:50%;
    z-index: 55;
}

我想您忘了在代码中添加width:50%;。

Answer 2

这将解决您的问题但不适用于IE：

http://jsfiddle.net/prollygeek/vR3AF/146/

#rnamePlate {
    position: absolute;
    background-color: purple;
    height: 100%;
    width: -moz-calc(50% - 75px);
/* WebKit */
 width: -webkit-calc(50% - 75px);
/* Opera */
 width: -o-calc(50% - 75px);
/* Standard */
 width: calc(50% - 75px);
    right:0px;
    z-index: 55;
    top:0px;
}

CSS：为同一父级分配固定宽度div和指定div的百分比。

2 个答案: