无法阻止背景被掩盖

我正在为学校做一个项目，我无法阻止我的背景被掩盖。如果我在右列编辑文本，它会很好地调整背景，但是如果我在左列编辑文本，它会溢出背景并进入页脚。我有代码，如果需要，任何建议，因为什么可能是错误的我的html/css?

这里是html

 <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>///</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>

<header> 
    <img alt="Wright State University Logo" src="images/WSU.jpg" />
</header>

<nav class="horizontal">
<ul>
    <li><a href="final_project.html">Home</a></li>
    <li><a href="biography.html">Biography</a></li>
    <li><a href="courses.html">Course Information</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="page_one.html">Important Links</a></li>
</ul>
</nav>

<div id="wrapper">

    <div id="columnleft">
    <aside class="asideleft">
        test test test test test test testtest test test test test test     testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test test test test
    </aside>
    </div>

    <div id="columnright">
        <img alt="///" src="//////////////////////"/>
        <aside class="asideright">
            <h3 class="h3">Recent News</h3>
            <p>test test test test test test testtest test test test  test test testtest test test test test test testtest test test test test test testtest test test test test test testtest test test test </p>
        </aside>
    </div>

</div>

<footer>&copy; Wright State University
&bull;3640 Colonel Glenn Hwy, Dayton, OH 45435 &bull;cse-dept@wright.edu &bull;
(937) 775-5131</footer>


 </body>
 </html>

这是css

 body{
font-family: "Arial Unicode MS";
background-image:url('../images/grid.png');
background-repeat:repeat; 
-webkit-background-repeat:repeat;
-moz-background-repeat:repeat;
-ms-background-repeat:repeat;
}

div#wrapper {
background-color:gold;
border-radius: 5px;
width: 980px;
margin: 0 auto;
height: auto;
 }
 header{
width: 980px;
padding-left: 420px; 
 }
h1, h2, h3, h4, h5, h6{
border: 1px solid #FFF;
border-radius: 5px; 
margin-left: 5px;
margin-right: 5px;
}
nav.horizontal{
height:60px;
width:100%; 
}

 nav.horizontal ul li{
border: 2px #006600 solid;
font-size:16px;
height:50px;
line-height:50px;
width:180px;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
text-align:center;
}
 nav.horizontal ul li a{
display:block;
background-color:gold; /*b */
color:RBG(16, 83, 55);
font-size: large;


-webkit-border-radius:30px / 25px;
-moz-border-radius:30px / 25px;
-ms-border-radius:30px / 25px;
text-decoration:none;
}
 nav.horizontal ul li a:hover{
background-color:lightslategrey;
color:#000;
}
nav.horizontal ul li a:visited{
color: RGB(16, 83, 55);
}

 #columnleft{
float: left; 
width: 740px;
margin-top: 13px;
padding-left: 15px;
padding-right: 10px;
margin-left: 15px;   
 }
.h3{
border: 3px #FFF solid;
}
 #columnright{
float: none; 
width: 165px; /** sets width of this column to 700px/980px**/
margin-right: 10px;
padding-top: 13px;
padding-left: 810px;
padding-bottom: 5px;
 }
 .asideleft{
background-color: RGB(16,83,55);
border-radius: 5px;
border-color: #FFF;
color:#FFF;
text-align: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}
.asideright{
padding-top: 1px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
background-color: RGB(16,83,55);
border-radius: 5px;
border-color: #FFF;
color:#FFF;
text-align: center;
}   

 footer{
 margin: 0 auto;
width: 980px;
color: #FFF;
font-size: medium;
background-color: gold;
border-radius: 5px;
text-align: center;
color:#2E71c0;
margin-top: 10px;

}

我怀疑你需要设置body和html元素的高度，像这样:

html, body { height: 100%; }

下面是一篇更详细的文章。

编辑

根据您的代码示例，我看到您没有清除左列的float规则。一个经典的方法是添加这个样式规则:.clear { clear: both; }，并将其应用于一个空的<div>或<br>，它是您要浮动的元素的兄弟。

在MDN上概述的一个更现代的解决方案是在包装元素上使用::after伪选择器，如下所示:

#wrapper::after { 
  content: "";
  display: block; 
  visibility: hidden; 
  clear: both;
}

无论哪种情况，您都需要从#columnright中删除float:none。下面是示例:http://jsfiddle.net/ckundo/vNyNY/1/

相关内容

最新更新

热门标签：