100%宽度的绝对定位

Question

这个问题已经被问过很多次了，但解决方案似乎对我不起作用。也许是因为我太迟钝了，无法将简单的解决方案应用于我更“复杂”的情况。

\n\n

我只需要在页眉 div 下方放置内容 div，然后在其下方放置页脚 div，同时对页眉和页脚 div 使用 100% 宽度。这是在 WordPress 网站中，因此有额外有趣的 div。我尝试过各种溢出：隐藏等。我很好地掌握了绝对定位将 div 移出流程的概念，只是不知道如何解决这种情况。我还尝试将顶部位置应用于内容 div，但这对页脚 div 没有帮助。

\n\n

任何帮助将不胜感激。如果还有其他方法可以做到这一点，我洗耳恭听！

\n\n

请参阅这个小提琴：\n http://jsfiddle.net/M8Wy6/1/

\n\n

<div id="home-page-wrap">\n    <div id="container">\n            <div id="header">\n                <div class="top-header">\n                    <div id="logo">logo</div>\n                    <div id="header-nav">header nav</div>\n                </div>\n                <div id="home-slider">slider</div>\n                <div id="main-nav">main nav</div>                \n            </div><!-- header -->\n\n            <div id="content">\n                 <div class="hentry">\n                        <div id="side-bar">the sidebar</div>\n                        <div class="entry-home">thecontent</div>\n                </div>\n                <div class="home-bottom">home bottom</div>\n           </div>\n           <div id="footer">footer</div>\n    </div>\n</div>\xe2\x80\x8b\n

\n\n\n\n

body {background:#F2F2F2;}\n\n#home-page-wrap {min-height:100%; height:auto !important; height:100%; width: auto; margin:0 auto; padding:0; background:#F2F2F2;}\n\n#container {width:260px; min-height:100%; height:auto !important; height:100%; margin:0 auto; padding:0 40px; background:#F2F2F2;}\n\n#header {float:left; height:50px; width:100%; left:0; position:absolute; margin:0 auto; padding:0; overflow:visible; background:#FFF;}\n\n.top-header {width:260px; margin:0 auto; height:50px;}\n\n#logo {float:left; position:relative; width:50px; height:25px; margin:0; padding:0; overflow:visible; border:2px solid red;}\n\n#header-nav {float:right; display:block; height:25px; width:50px; padding:0; margin:0; color:#919395; border:2px solid red;}\n\n#home-slider {float:left; width:100%; height:120px; margin:0 auto; background:#404040; border:2px solid red;}\n\n#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;}\n\n#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;}\n\n.hentry {width:260px; position:relative; margin:0 auto; overflow:hidden;}\n\n.entry-home {float:left; width:100px; min-height:100px;height:auto !important;height:100px; margin:25px 0; padding: 20px 0 0 0;}\n\n#side-bar {float:right; width:50px; min-height:100px; height:auto !important; height:100px; margin:25px; padding:0; background:#F2F2F2;}\n\n#footer {width:100%; height:50px; padding:0; margin:0 auto; background:#666666; position:absolute; left:0; overflow:visible;}\n

\n\n

\xe2\x80\x8b

\n

Answer 1

我只需要在页眉 div 下方放置内容 div，然后在其下方放置页脚 div，同时对页眉和页脚 div 使用 100% 宽度。

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

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