Question

我有一个页面，其中的孩子div不会扩展#header div，因为他们应该......

如果标题div的高度设置为60px或任何其他绝对值，我可以使其拉伸并正常工作，但我无法使其内部的内容自动调整大小。 ..

我在同一页面上使用Bootstrap 3。

有人可以提供一些建议吗？我一直在愚弄#header，#width-clip的相对大小（所有当前设置为自动 - 再次，如果你将#header设置为固定高度它会工作（有点）但是如何让它们自动调整大小？）

HTML：

<div id="header" role="banner">
    <div id="sr-header-area">
        <div class="width-clip">
            <div class="dropdown srdrop" onmouseover="" onclick="open_menu(this)"><span class="selected title"> me</span></div>
            <div class="drop-choices srdrop" style="top: 18px; left: 0px;"><a class="choice" href="#">Link</a></div>
            <span class="separator">|</span>
            <ul class="flat-list sr-bar hover list-inline nopadding">
                <li><a href="#">pics</a></li>
                <li><span class="separator">-</span><a href="#">funny</a></li>
            </ul>
            <span class="separator">–</span>
            <a id="sr-more-link" href="#">edit »</a>    
        </div>
        <div id="header-bottom-left">
            <a id="header-img" class="default-header" title="" href="/">51451</a>
            <ul class="tabmenu">
                <li class="selected"><a href="#">Test</a></li>
                <li><a href="#">rising</a></li>
            </ul>
        </div>
        <div id="header-bottom-right">
        </div>
    </div>
</div>

CSS：

#header {
    background-repeat: no-repeat;
    height: 60px; /* only works if static height is set */
    background-color: #000;
    background-position: 0px 0px;
    border-bottom: 0px solid #000;
}

#header {
    border-bottom: 1px solid #5F99CF;
    position: relative;
    background-color: #CEE3F8;
    z-index: 99;
}

#sr-header-area {
    background-color: #F0F0F0;
    white-space: nowrap;
    text-transform: uppercase;
    border-bottom: 1px solid #808080;
    font-size: 90%;
    height: 18px;
    line-height: 18px;
}


#header-img.default-header {
    text-indent: -9999px;
    background-image: url('http://localhost/templates/bootstrap/img/sprites.png');
    background-position: 0px 0px;
    background-repeat: no-repeat;
    height: 40px;
    width: 150px;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 3px;
margin-top: 27px;
}

Answer 1

看着你的小提琴，我看到标签浮动的原因是因为<ul class="tabmenu">的默认margin-bottom为10px，它来自Bootstrap：

old header

注意那里的橙色阴影 - 那些是边距，并注意我选择了tabmenu元素。

如果您通过修改.tabmenu规则来设置margin-bottom: 0;来覆盖边距，那么您将获得我所假设的预期结果。请在此处查看更新的小提琴：

http://jsfiddle.net/CUdTe/2/

Answer 2

问题是在标题中嵌套不好。

我已将header-bottom-left和header-bottom-right元素移出sr-header-area并将其设置为其兄弟姐妹。

现在它自动填充空间，所有CSS更改都是注释而不是删除（其中两个）。

所以，由于sr-header-area是一个全宽度的块元素，它应该保持自己的状态，并将头部元素放在它之后。如果某些事情听起来是正确的，那么你应该尝试在HTML / CSS中遵循相同的结构。否则，你可能会做一些破坏性的事情，当你更新/升级你的网站时，它可能会在某些时候开始出现问题。

请在此处查看：http://jsfiddle.net/CUdTe/3/

父div对于儿童div来说太小了

2 个答案: