Question

我正在使用visual studio 2013 我想把网站分成这样的

这是我的Html代码;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Website</title>
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id ="wrapper">
            <div id =" banner">

            </div>
            <div id="navigation">

            </div>
            <div id="content">

            </div>
            <div id ="sidebar">

            </div>
            <div id=" footer">
              <p> AlL rights reserved.</p> 
            </div>
        </div>

    </form>
</body>
</html>

这是css代码

body 
{
    font-family:'Calibri',Verdana , sans-serif;
    background-color: #e9e9e9;
}
#wrapper
{
    width: 1080px;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
    background-color: #fff;

}
#banner
{
    height:200px;
    border: 3px solid #E3E3E3;

}
#navigation
{
    height: 60px;
    border: 3px solid #e3e3e3;
    margin-top: 20px;
}

#content
{
    float:left;
    width: 750px;
    margin: 20px 0 20px 0;
    padding : 10px;
    border: 3px solid #e3e3e3;
}
#sidebar
{
    float:right;
    width: 250px;
    height: 400px;
    margin: 20px 10px 20px 10px;
     border: 3px solid #e3e3e3;
}
#footer
{
    clear:both;
    width:auto;
    height:40px;
    margin-top:20px;

}

像这样的问题：

任何人都可以帮忙吗？我不知道问题出在哪里

Answer 1

Demo Fiddle

美好而简单

将overflow:hidden;添加到#wrapper，这将阻止您的浮动元素超出基础父级，而不会强制扩展。

<强> Update

如果您想确保布局正确流动，请将content和sidebar元素包含在另一个div设置overflow:hidden的内容中（按照上面的jsfiddle链接）

Answer 2

这是因为你丢失了布局。请阅读＆＃34; HasLayout＆＃34;在网上以避免将来出现这种情况

请加入

<强> CSS

#wrapper {
    overflow:hidden
}

在html网站上显示页脚

2 个答案:

Demo Fiddle