页脚放置

Question

我有两个div。左边的一个称为#menudiv，右边的一个称为#contentdiv。 CSS如下所示：

#menudiv{
    width:20%;
    padding:3px;
    float:left;
    height:100%;
    font-family:ubuntu;
    font-size:25px;
    color:#404040;
}

#contentdiv{
    font-family:verdana;
}

#footer{
    position:relative;
    float:bottom;
    display:flex;
    justify-content:space-between;
}

现在可以看出我将menudiv的身高设置为100％。这是因为一旦menudiv的元素结束，我不希望contentdiv扩散并覆盖menudiv下的空间。

在写完contentdiv的所有内容后，我现在需要在页面底部放置一个页脚。问题是页脚内容出现在contentdiv下面（因为menudiv的高度设置为100％）。我希望页脚的元素/内容均匀地分布在页面的底部（以便它们从menudiv下面开始）。

这是页面结构：

<div id="menudiv">
    <img class="titleico" src="images/home.png" /> &nbsp; &nbsp; HOME<br />
    <ul id="menulist">
        <li><a href="yo">Menu item 1</a></li>
        <li>Menu item 2</li>
    </ul>
</div>

<div id="contentdiv">
    <!-- several paragraphs go here as seen in the image at bottom -->
</div>

<div id="footer">
    <div>Footer item 1</div>
    <div>Footer item 2</div>
    <div>Footer item 3</div>
</div>

我怎样才能做到这一点？

Answer 1

将abc hello turkey day world 和float: none添加到您的页脚。由于您的页脚不是块级元素，并且前面的元素是浮动的，因此页脚的位置是这样的。

clear: both

Answer 2

将菜单和内容包装在一个容器中，然后将页脚放入其中。这样菜单将是容器的100％而不是html主体。容器将是您的contentdiv允许的任何高度。

<div id="container">
    <div id="menudiv"></div>
    <div id="contentdiv"></div>
</div>
<footer>
</footer>

Answer 3

像这样改变你的页脚风格

<div id="footer" style="clear:both">
<div style="float:left;width:25%">Footer item 1</div>
<div style="float:right;width:25%">Footer item 2</div>
<div style="float:right;width:25%">Footer item 3</div>