Question

我的html和css：

<style>
#header{min-height:100px;max-height:100px; width:100%;border:2px inset gray;margin-bottom:10px;}
#container{position:relative; width:100%;border:2px inset gray; padding:2px;margin:10px 0px 10px 0px;}
#leftbar{position:absolute; top:0; left:0; display:inline-block; width:25%;border:2px inset gray;}
#maincontent{position:absolute; top:0; right:0; display:inline-block; width:73%;border:2px inset gray;}
#footer{background-color:yellow;}
</style>
</head>

<body>
<div id="header">header<br>some more content<br>some more content</div>
<div id="container">
<div id="leftbar">leftbar<br>some more content<br>some more content <br>some more content</div>
<div id="maincontent">main content <br>some more content <br>some more content <br>some more content <br>some more content</div>
</div>
<div id="footer">footer </div>
</body>

图像： http://postimg.org/image/xapaykx4r/ 什么似乎是问题？我不想使用浮动。当使用relative和absolute时，如何在#container下放置div＃footer？有人有任何想法吗？

Answer 1

唯一的另一个选择是给容器的高度等于内部divs

#container{ height:400px;}

像这样的事情

页脚不会到底部，使用相对，绝对和内联块，不想使用浮点数

1 个答案: