Question

我是html的新手。我想按如下方式进行简单的布局设计：

-------------------------------------
                                    |
-------------------------------------
    |                           |   |
    |                           |   |
    |                           |   |
    |                           |   |
    |---------------------------|   |
____|_________footer____________|___|

但我的页脚未在左右菜单之间调整。它位于左右菜单下方。

以下是我的HTML代码：

<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background-color: aqua;
    position: relative;
}

#header {
    height: 5%;
    background-color: #FFA500;
}

#leftmenu {
    background-color: #FFD700;
    height: 90%;
    width: 20%;
    float: left;
}

#rightmenu {
    background-color: #FFD700;
    height: 90%;
    width: 10%;
    float: left;
}

#content {
    style ="background-color: #EEEE12;
    height: 85%;
    width: 70%;
    float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
</title>
</head>
<body>
    <div id="container" class=".container">

        <div id="header" class=".header">
            <h1>Main Title of Web Page</h1>
        </div>

        <div id="leftmenu" class=".leftmenu">
            <b>Menu</b><br> HTML<br> CSS<br> JavaScript
        </div>

        <div id="content" class=".content">Content goes here</div>

        <div id="rightmenu" class=".rightmenu">
            <b>DashBoard</b><br> Recent<br> Saved Search
        </div>

        <div id="footer"
            style="background-color: #FFA500; clear: both; text-align: center;">
            Copyright Â© W3Schools.com</div>

    </div>


</body>
</html>

Answer 1

所以我在这里做的是创建一个中间 div。它包含您的内容和页脚。

你的中间div有一个相对位置，我绝对将你的页脚放在底部。

注意，中间div需要一个高度才能工作。这应该不是问题！

如果您还有其他需要，请告诉我们！

<div id="middle"> 
<div id="content" class=".content">Content goes here</div>
<div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
Copyright Â© W3Schools.com
</div>
</div>
</div>

#middle {float: left; width: 70%; height: 80px; position: relative;}
#footer {bottom: 0px; position: absolute; width: 100%}

这里有一个适合你的例子！

<强> http://jsfiddle.net/LmVKD/

Answer 2

你有一些问题

首先，您要在<style>标记中将内联CSS与CSS混合使用。不要这样做，只需将它放在<style>标签中99.9％的时间

其次，您在CSS的一行中有一个style="...，大概来自复制，所以我删除了它

第三，您需要设置页脚的宽度。由于两个边的div都是百分之三十，所以我将页脚改为width:70%

第四，你需要将它放在左边div的右边。你可以使用margin-left:20%，左边div的宽度

来做到这一点

最后，您需要将页脚放在左侧和右侧div旁边。通过使用我的浏览器检查元素我看到页脚是20px。因此，我给了两个侧面div margin-bottom:-20px，以便页脚上的clear:float不会超过两个元素

Demo

虽然这不是我的方式，但它可以正常工作

在html中调整div

2 个答案: