谷歌CSE高度（动态内容）

Question

我有CSS位置问题。

基本上，我不知道外部div #contentarea或子元素#mainarea，#sidebar是否存在问题。 #contentarea具有恒定宽度，隐藏溢出，并包含#mainarea＆amp; #sidebar。它们都漂浮在左边。

我已将Google CSE结果代码放入#mainarea。 div #cse的内容会随时更改。

问题是此页面中#contentarea的高度是侧边栏的高度。 Cse div有更多内容要展示（但它隐藏了） 似乎#mainarea的高度也会随时改变，但#contentarea

的高度也不会改变

我该如何解决这个问题？我有一个JSFiddle here。

尝试在JSFiddle中编写Εξεταστική。它在小提琴中工作正常，但在我的应用程序中没有。

当我评论我的侧边栏内容时，作品也很棒。

补充工具栏原始内容

<div id="sidebar">
    <div id="news">
        <div class="head">
            <a id="last" class="active">Τελευταία νέα</a>
            <a id="popular" class="inactive">Δημοφιλή νέα</a>
        </div>
        <div class="body">
            <ul id="last">
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 1</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 2</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 3</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 4</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 5</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 6</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 7</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 8</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 9</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 10</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 11</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 12</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
            </ul>
            <ul id="popular">
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 1</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 2</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 3</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 4</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 5</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 6</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 7</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 8</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 9</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 10</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 11</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
                <li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 12</a><label class="author">by kouts</label>
                <div class="clear">
                </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="radio_adv">
        <a href="/radio"><img src="/template/img/main/dap_radio.gif" width="329px" height="150px" title="Δαπ-Νδφκ Radio Ακούστε μας live" alt="Δαπ-Νδφκ Radio Ακούστε μας live"/></a>
    </div>
    <div id="social">
        <a id="newsletter_bt"><img src="/template/img/main/newsletters.png" width="55px" height="55px" alt="Εγγραφείτε στην λίστα μας ώστε να σας στέλνουμε e-mails σχετικά με την σχολή" title="Εγγραφείτε στην λίστα μας ώστε να σας στέλνουμε e-mails σχετικά με την σχολή"/></a>
        <a href="/app/rss" target="_blank"><img src="/template/img/main/rss.png" width="55px" height="55px" alt="Εγγραφείτε στην ροή ειδήσεών μας και μείνετε πάντα ενημερωμένει" title="Εγγραφείτε στην ροή ειδήσεών μας και μείνετε πάντα ενημερωμένει"/></a>
        <a href="http://www.facebook.com/enhmerwsh.shmmy" target="_blank"><img src="/template/img/main/facebook.png" width="55px" height="55px" alt="Επισκεφθείτε την σελίδα μας στο facebook" title="Επισκεφθείτε την σελίδα μας στο facebook"/></a>
        <a href="http://www.twitter.com/enhmerw_shshmmy" target="_blank"><img src="/template/img/main/twitter.png" width="55px" height="55px" alt="Επισκεφθείτε την σελίδα μας στο twitter" title="Επισκεφθείτε την σελίδα μας στο twitter"/></a>
        <a href="http://www.youtube.com/user/enhmerwshshmmy" target="_blank"><img src="/template/img/main/youtube.png" width="55px" height="55px" alt="Επισκεφθείτε το κανάλι μας στο youtube" title="Επισκεφθείτε το κανάλι μας στο youtube"/></a>
    </div>
    <div style="width:329px;height:329px;position:relative;" class="fb-activity" data-width="329" data-height="329" data-header="true" data-border-color="#dadada" data-recommendations="true">
    </div>
</div>

侧边栏的CSS：

#news {
    width: 327px;
    height: 365px;
    position: relative;
    clear: both;
    margin-bottom: 10px;
}
#news .head {
    width: 100%;
    height: 25px;
}
#news .head a {
    height: 20px;
    margin: 0px 5px 0px 5px;
    font-size: 0.8125em;
    background: #f8f9fd;
    padding: 5px 5px 0px 5px;
    float: left;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-top: 1px solid #dadada;
    color: #333333;
    cursor: pointer;
    position: absolute;
    z-index: 20;
}
#news .head .inactive {
    border-bottom: 1px solid #f8f9fd;
    background: #e2e5f2;
}
#news .body {
    width: 100%;
    height: 340px;
    background: #f8f9fd;
    border: 1px solid #dadada;
    overflow: hidden;
}
#news .body ul {
    float: left;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: visible;
    position: relative;
    background: #f8f9fd;
    list-style-type: none;
}
#news li {
    border-bottom: 1px dotted #a19393;
    margin: 0px 8px;
    position: relative;
    height: auto;
    clear: both;
}
#news li .datetime {
    font-size: 0.625em;
    float: left;
    margin-top: 3px;
    position: absolute;
    color: #afa7a7;
}
#news li .author {
    font-size: 0.625em;
    position: absolute;
    right: 0px;
    bottom: 2px;
    color: #afa7a7;
}
#news li .hits {
    font-size: 0.625em;
    float: right;
    position: relative;
    color: #afa7a7;
    margin-top: 3px;
}
#news li a {
    float: left;
    margin-top: 8px;
    margin-bottom: 5px;
    width: 250px;
    text-decoration: none;
    font-size: 0.875em;
    color: #e54949;
    cursor: pointer;
    text-align: justify;
}
#news li a:hover {
    text-decoration: underline
}
#radio_adv {
    width: 329px;
    height: 150px;
    background-color: black;
    margin-bottom: 5px;
}
#social {
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    height: 55px;
    : ;
}
#social img {
    float: left;
    margin: 0 5px 0 5px;
    position: relative;
    cursor: pointer;
}