0

我正在为学校做一个项目，我无法让我的背景不被掩盖。在 div 标签内，我有两列（左和右） 如果我编辑右列中的文本，它会很好地调整背景，但是如果我编辑左列中的文本，它会溢出背景并进入页脚。如果需要，我有代码，关于我的 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;


}
4

1 回答 1

2

我怀疑您需要像这样设置bodyandhtml元素的高度：

html, body { height: 100%; }

这是一篇更详细的文章。

编辑

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

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

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

在任何一种情况下，您都需要删除float:nonefrom #columnright。这是示例：http: //jsfiddle.net/ckundo/vNyNY/1/

于 2013-04-12T02:35:30.590 回答