好吧，在设计这个网站时，我认为将所有内容放在左侧列或右侧列中会很聪明。我在左边有一个透明的标题，在右边有另一个透明的位，然后两边都有一个白色的背景。现在花了一点时间在它上面，我不再喜欢它的外观，当一侧完成而另一侧继续向下到页面底部时，如下所示：
在上面的图片中，我希望左侧的背景颜色继续向下，不幸的是，由于到目前为止我布置课程的方式，我无论如何都看不到“修复”这个问题。
这有点厚颜无耻，但我想知道是否有经验的人可以解决这个问题？或者对此事有什么明智的建议？
编辑：这是复制粘贴墙的替代方法：http: //jsfiddle.net/TZucm/ 这有点乱，但你明白了，你可以在 jsfiddle 中看到右边的列在左边之前很久就完成了。我想知道是否有可能在不完全重写我的 div 结构的情况下继续使用白色背景。
我的 css （简化，我编辑了你不需要知道的任何进一步的 div 类）：
* {margin: 0; padding:0;}
body
{
font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
color: Grey;
background-image: url('Images/background_gradient.png');
background-repeat:repeat-x;
background-color: #d4ffaa;
margin: 0 auto;
height: auto;
max-width: 90%;
}
h2
{
margin: 0.6em 0;
color: Grey;
border-bottom: 2px solid #d4ffaa;
font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
}
#central_container
{
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
float: left;
width: 67.1%;
clear: left;
}
#header_container
{
width: 100%;
max-height: 300px;
height: 15em;
}
#header_title
{
width: 100%;
height: 80%;
}
#header_title h1{ font-size: 4em; color: Ivory;}
#navbar_container
{
width: 100%;
height: 20%;
}
//edited
#currentpage_container
{
background-color: Ivory;
width: 100%;
height: 20%;
}
#currentpage_content
{
font-family: 'Trebuchet Ms';
padding: 1em 3em;
}
//edited
#rightside_container
{
float: right;
width: 33%;
}
#register_container
{
width: 100%;
max-height: 300px;
height: 15em;
}
//edited
#contact_container
{
background-color: Ivory;
width: 100%;
}
#contacts_content{ padding: 1em 3em; }
//edited
#logos_content
{
padding: 0.5em 3em;
height: 150px;
}
//edited
#social_content
{
padding: 1em 3em;
}
我的 html 以防万一（请记住，未针对相关性进行编辑）：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Verge Green IT</title>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-ea3b6db-3e14-19ab-cd0a-b82a99b4706"}); </script>
{% load static %}
<script type="text/javascript" src="{% static "JS/CycleLogos.js" %}" defer="defer"></script>
<link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />
</head>
<body>
<div id="central_container">
<!--Left-side Current-page Content-->
<div id="leftside_container">
<!--Header-->
<div id="header_container">
<div id="header_title">
<h1>Green IT at The Verge</h1>
</div>
<!--Navbar-->
<div id="navbar_container">
<div class="navbar_links">
<ul>
<li><a href="">Home</a></li>
<li><a href="About">About</a></li>
<li><a href="Speakers">Speakers</a></li>
<li><a href="Exhibitors">Exhibitors</a></li>
<li><a href="Agenda">Agenda</a></li>
<li><a href="Location">Location</a></li>
</ul>
</div>
</div>
</div>
<!--Current Page Contents-->
<div id="currentpage_container">
<div id="currentpage_content">
<h2>Currentpage Content</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h2>I'm another header</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididus nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
"Lorem ipsum dolor sit amet, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<!--Right-side Every-page Content-->
<div id="rightside_container">
<div id="register_container">
<div class="bubble"> <p>Register now > For free entry to the expo</p></div>
</div>
<div id="contact_container">
<div id="contacts_content">
<h2>Contact</h2>
<p class="text">
For more information on the event or if your interested in Speaking / Exhibiting don't hesitate to get in touch: </p>
<p class="contactNum"> 02082394073 </p>
<p class="contactEmail"> info@vergegreenit.com </p>
</div>
<div id="logos_content">
<h2>Associates</h2>
<div id="img0" class="logo">
<img src="{% static "CSS/Images/phone_icon.gif" %}"/>
</div>
<div id="img1" class="logo2">
<img src="{% static "CSS/Images/email_icon.gif" %}"/>
</div>
<div id="img2" class="logo">
<img src="{% static "CSS/Images/phone_icon2.gif" %}"/>
</div>
<div id="img3" class="logo2">
<img src="{% static "CSS/Images/email_icon2.gif" %}"/>
</div>
</div>
<div id="social_content">
<h2>Share Event</h2>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
</div>
</div>
</div>
</div>
</body>
</html>