Question

我在导航栏的左侧和右侧有一个带有图像的导航栏。当调整文档大小时，其百分比宽度和右图像会保持在导航栏下方。

它主要是宽度为navWrapper的百分比减去像素数量的问题。像素量来自于添加宽度为leftNav和rightNav。

我无法使用新的css Calc（），因为我需要为我的学校支持旧版浏览器。（有一半的电脑有IE7）。

JSFiddle： http://jsfiddle.net/az4A6/2/

HTML

<div id="navbar">
    <div id="navWrapper">
        <div id="leftNav"></div>
        <div id="navInnerWrapper">
        </div>
        <div id="rightNav"></div>
    </div>
</div>

CSS

#navbar {
    width:100%;
    clear:both;
    background:url('../img/navTexture.png') repeat-x scroll center bottom #FFF;
    height:54px;
    margin:0px;
}
#navWrapper {
    width:90%;
    height:54px;
    max-width:950px;
    margin:0px auto;
    position:relative;
    background:url('../img/navWrapperTexture.png') repeat-x scroll center bottom #FFF;
}
#leftNav {
    width:37px;
    height:54px;
    background-image:url('../img/leftNav.png');
    float:left;
}
#rightNav {
    width:37px;
    height:54px;
    background-image:url('../img/rightNav.png');
    float:left;
}
#navInnerWrapper {
    display:block;
    margin-top:6px;
    height:40px;
    width:100%;
    max-width:876px;
    float:left;
}

的jQuery

$(document).ready(function() {
    $('#navInnerWrapper').width($('#navWrapper').width() - 74+'px');
});
$(window).resize(function() {
    $('#navInnerWrapper').width($('#navWrapper').width() - 74+'px');
});

Answer 1

您可以使用box-sizing:border-box轻松完成此操作，IE6-7的填充为here（您需要确保在 root 中将此链接在您的css中形成css文件）。你还需要让你的100％div在2个浮动之后。您可以阅读有关大小调整here和here的更多信息。

CSS：

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    *behavior:url(/css/boxsizing.htc)
}
#navbar {
    width:100%;
    height:100px;
    background:blue;
}
#navWrapper {
    margin:0 auto;
    width:90%;
    height:100px;
}
#leftNav, #rightNav {
    width:37px;
    height:100px;
    background:red;
}
#leftNav {
    float:left;
}
#rightNav {
    float:right;
}
#navInnerWrapper {
    width:100%;
    height:100px;
    padding:0 37px;
    background:green;
}

HTML：

<div id="navbar">
    <div id="navWrapper">
        <div id="leftNav"></div>
        <div id="rightNav"></div>
        <div id="navInnerWrapper"></div>
    </div>
</div>

DEMO

Answer 2

您是否有使用jQuery来处理大小调整的具体原因？是否可以通过正确的浮动来实现？

http://jsfiddle.net/az4A6/1/

#rightNav {
    width:37px;
    height:54px;
    background-color:red;
    float:right;
}

html导航栏包装/无法正常工作

2 个答案: