Question

在设计这个网站时，我认为将所有内容放在左侧列或右侧列中会很聪明。我左边有一个透明标题，右边有另一个透明位，然后两边都有白色背景。现在已经花了一小段时间在它上面我不再喜欢它在一面完成时的外观，另一面继续下到页面的底部，如下所示：

enter image description here

在上面的图片中，我希望左侧背景颜色继续向下，不幸的是，由于我已经布置了我的课程到目前为止我无法看到“修复”这个。

有点厚颜无耻，但我想知道有经验的人是否可以看到这方面的方法？或对此事有任何圣人建议吗？

编辑：以下是复制粘贴墙的替代方案：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>

Answer 1

你可以在CSS中使用这个相等高度的colums

来做到这一点

你设置你的容器，溢出设置为隐藏，然后在每个div添加负边距底部和相等的正填充底部。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

如果你只想要一些没有用CSS搞砸的东西那么你也可以使用jQuery：

// JQuery function for equal height divs
function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();                                      
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}   

// Set the divs to have the height equaliser applied to them. 
equalHeight($('.equalColumns'));

如果你在这里使用代码并将class equalColumns添加到你的两列中，jQuery应该为你完成其余的工作。

是否可以使我的CSS列高度相等？

1 个答案: