Question

我正在为一所学校的项目工作，我无法保持背景不被掩盖。在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;


}

Answer 1

我怀疑您需要在body和html元素上设置高度，如下所示：

html, body { height: 100%; }

Here is an article详情更详细。

修改

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

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

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

在任何一种情况下，您都需要从float:none中移除#columnright。以下是示例：http://jsfiddle.net/ckundo/vNyNY/1/

无法防止背景被掩盖

1 个答案: