Question

这个问题已被问过很多次，但解决方案似乎并不适合我。也许是因为我太沉闷了，无法将简单的解决方案应用到我更“复杂”的情况中。

我只需要我的标题div下面的内容div，然后是页脚下方的页脚div，同时使用页眉和页脚div的100％宽度。这是一个WordPress网站，因此更有趣的div。我已经尝试过各种溢出：隐藏等等。我很好地掌握了绝对定位将div从流程中取出的概念，只是不确定如何解决这种情况。我也试过在内容div中应用顶部位置，但这对页脚div没有帮助。

非常感谢任何帮助。如果有另一种方法可以做到这一点，我全都听见了！

请看这个小提琴： http://jsfiddle.net/M8Wy6/1/

<div id="home-page-wrap">
    <div id="container">
            <div id="header">
                <div class="top-header">
                    <div id="logo">logo</div>
                    <div id="header-nav">header nav</div>
                </div>
                <div id="home-slider">slider</div>
                <div id="main-nav">main nav</div>                
            </div><!-- header -->

            <div id="content">
                 <div class="hentry">
                        <div id="side-bar">the sidebar</div>
                        <div class="entry-home">thecontent</div>
                </div>
                <div class="home-bottom">home bottom</div>
           </div>
           <div id="footer">footer</div>
    </div>
</div>

body {background:#F2F2F2;}

#home-page-wrap {min-height:100%; height:auto !important; height:100%; width: auto; margin:0 auto; padding:0; background:#F2F2F2;}

#container {width:260px; min-height:100%; height:auto !important; height:100%; margin:0 auto; padding:0 40px; background:#F2F2F2;}

#header {float:left; height:50px; width:100%; left:0; position:absolute; margin:0 auto; padding:0; overflow:visible; background:#FFF;}

.top-header {width:260px; margin:0 auto; height:50px;}

#logo {float:left; position:relative; width:50px; height:25px; margin:0; padding:0; overflow:visible; border:2px solid red;}

#header-nav {float:right; display:block; height:25px; width:50px; padding:0; margin:0; color:#919395; border:2px solid red;}

#home-slider {float:left; width:100%; height:120px; margin:0 auto; background:#404040; border:2px solid red;}

#main-nav { float:left; display:block; width:100%; height:50px; margin:6px auto 6px; padding:0; z-index:100; background:#999; border:2px solid red;}

#content {width:260px; min-height:260px; height:auto !important; height:260px; padding:0; margin:0 auto; background:#F2F2F2; position:absolute; left:0; border:2px solid green;}

.hentry {width:260px; position:relative; margin:0 auto; overflow:hidden;}

.entry-home {float:left; width:100px; min-height:100px;height:auto !important;height:100px; margin:25px 0; padding: 20px 0 0 0;}

#side-bar {float:right; width:50px; min-height:100px; height:auto !important; height:100px; margin:25px; padding:0; background:#F2F2F2;}

#footer {width:100%; height:50px; padding:0; margin:0 auto; background:#666666; position:absolute; left:0; overflow:visible;}

Answer 1

我只需要我的标题div下方的内容div，然后是页脚下方的页脚div，同时使用页眉和页脚div的100％宽度。

这是div的默认行为：它们将水平扩展以填充其父元素，并垂直展开以包含其子元素/内容。因此，您可以通过删除页眉，页脚和内容div上的绝对定位，浮动和宽度属性来获得所需的内容。

演示：http://jsbin.com/ibexuy/1/edit

绝对定位，100％宽度

1 个答案: