Css 分区边框未显示在正确的位置_Css_Html_Border

Css 分区边框未显示在正确的位置

css html

Css 分区边框未显示在正确的位置,css,html,border,Css,Html,Border,我有一个蓝色边框的潜水艇。这个div是页脚，因此它被放置在页面的底部。该div中的文本显示在底部，但边框本身显示在顶部以下是HTML： <body> <div id="header"> this is the header </div> <div id="mainleft"> this is the main left </div> <div id="mainright"> this is the main righ

我有一个蓝色边框的潜水艇。这个div是页脚，因此它被放置在页面的底部。该div中的文本显示在底部，但边框本身显示在顶部

以下是HTML：

<body>

<div id="header">
this is the header
</div>

<div id="mainleft">
this is the main left
</div>

<div id="mainright">
this is the main right
</div>

<div id="footer">
this is the footer
</div>

</body>

页脚div没有显示在底部。您需要一个容器div，用于包装其中的所有div，并设置其属性width、height等。

页脚div不会出现在底部。您需要一个容器div，它将所有div包装在其中，并设置其属性width、height等。

添加一个clear:tware；添加到页脚元素。

添加一个清晰的：两者；到页脚元素。

这就像一个符咒。我以前从未听说过CLEAR，但它很有效，谢谢。是的，您可能希望查看位置、浮动、清除和显示标记，以避免将来的定位/布局问题。马克回答说，这就像一个符咒。我以前从未听说过CLEAR，但它很有效，谢谢。是的，您可能希望查看位置、浮动、清除和显示标记，以避免将来的定位/布局问题。马克回答道。

body{
    background-color:#666666;
}

#header{
    min-height:75px;
    border:3px solid #000099;
}

#mainleft{
    height:500px;
    width:15%;
    border-left:3px solid #000099;
    float:left;
}
#mainright{
    height:500px;
    width:84%;
    border-left:3px solid #000099;
    border-right:3px solid #000099;
    float:right;
}

#footer{
    height:70px;
    width:100%;
    border:3px solid #098099;
    bottom:0px;
}