Question

我在设置水平部分的布局时会遇到一些问题，这些部分的自动高度取决于它的内容。

这是我的页面结构。

<div id="#page-wrap">
<header>
    <div class="inner">
        #navigation
        #logo floated right
    </div>
</header>
<section id="services">
    <div class="inner">
        #some floated boxes
    </div>
</section>
<section id="main">
    <div class="inner">
        #secteion content
        #aside sidebar
    </div>
</section>
<footer>
    <div class="inner">
        #footer stuff
    </div>
</footer>
</div>

标题，部分和页脚总是100％宽。每个部分都有一个.inner div，以margin为中心：0 auto。

.inner {
    margin: 0 auto;
    padding: 96px 72px 0;
    width: 1068px;
    color: #3C3C3C;
}

例如这是我的标题：

header .inner {
    background: #fff url('images/years.png') no-repeat top right;
    position:relative;
    /*height:100px;*/
}

#logo {
    position:absolute;
    right:70px;
    top:15px;
    float:right;
}

问题：如果我没有将标题设置为特定高度，则背景图像会被切断。如果我使用像firebug这样的开发工具检查标题，那么它内部的导航就会出现在标题框之外。因此，如果我没有设置100px的高度，水平导航将切断背景图像 - 即使它位于相同的标题中。

任何想法我在这里要考虑的事情。

Answer 1

header，section和footer元素不是容器元素 - 如果您希望它们的行为就像您必须设置它们display: block一样 - 这将使他们表现得正常div

Answer 2

我认为这可能是一个明确的问题 - 您可以尝试在关闭标题之前添加<div style="clear: both;"></div>，或者将以下属性添加到标题

.header {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

但是，如果您的导航有时会挂出容器（如下拉列表），最好使用http://www.positioniseverything.net/easyclearing.html处的方法。

最后，您还可以尝试将整个事物（标题和内容）包装在另一个只有background属性的div中。这样bg图像就不会被切断了。

Answer 3

你说它应该有一个自动高度取决于它的内容，然后说明问题是背景被切断。那么，你究竟在寻找什么？最小高度为100px，如果内容较大则会扩展？或者您是否期望导航高度为100px（因此强制标题为100px）？它有点令人困惑......无论如何，如果未设置高度并且它的子节点是浮点数，则标题的高度为零。听起来好像你想要标题为100px以显示整个背景 - 如果是这样，只需将标题高度设置为100px（就像你已经完成的那样）

编辑//你还说过徽标是浮动的，但后来表明它的位置绝对 - 这是什么？导航如何定位？需要更多信息

css布局问题 - 自动高度的全宽部分？

3 个答案: