このサイトをデザインするときは、すべてを左側の列または右側の列に配置するのが賢明だと思いました。左側に透明なヘッダーがあり、右側にもう1つの透明なビットがあります。その後、両側の背景が白になります。少し時間を費やしたので、片側が終了し、もう一方の側が次のようにページの下部まで続くときの外観が気に入らなくなりました。
上の画像では、左側の背景色を下まで続けてほしいのですが、残念ながら、これまでのクラスのレイアウト方法が原因で、これを「修正」する方法がわかりません。
少し生意気ですが、経験のある人なら誰でもこれを回避する方法を見つけられるのではないかと思いました。またはその問題について賢明なアドバイスがありますか？
編集：コピーペーストの壁の代わりになります：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>