我有CSS位置问题。

基本上,我不知道,如果外层div #contentarea或子元素#mainarea#sidebar有问题。 #contentarea具有恒定的宽度,隐藏了溢出,并包含#mainarea#sidebar 他们两个都漂浮在左边。

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

问题在于此页面中#contentarea的高度是侧边栏的高度。.Cse div有更多内容要显示(但它是隐藏的)看来#mainarea高度也在#mainarea变化,但对于#contentarea却没有变化

我该如何解决? 在这里有一个JSFiddle。

尝试用Εξεταστική编写Εξεταστική。 在Fiddle中工作正常,但在我的应用程序中却没有。

当我发表评论时,我的侧边栏内容也很棒。

侧边栏原始内容

<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;
}

  ask by Chris P translate from so

本文未有回复,本站智能推荐:

1回复

使HTML内容区域适合视口高度?

我刚刚制作了这个演示,以提取我要完成的任务: 自动调整主要内容区域 替代文字http://ilove4d.com/autosize.png 我希望粉红色/黄色区域按照以下规则进行操作: 最小高度是其内容的大小(可变),如果内容大小小于视口大小 否则,最小
1回复

CSS浮动高度问题

所以我有这个页面: http://demo.unlockedmanagement.com/example/floating-issue.html 您会注意到3个项目:“详细信息”,“附件”和“描述”。 现在,当您展开“详细信息”时(仅单击标题),问题就来了。 附件文本在详细内容的
1回复

元素宽度随着高度的增加而扩展

我用CSS :before和:after来创建一个像div这样的纸张布局。 很好,但宽度随高度增加而增加。 我尝试了最大宽度,但无济于事。 关于如何避免这种情况的任何想法。 HTML CSS 身高增加之前 增高后 jsfiddle链接 将小提琴中的内
2回复

让最高的div决定一排的高度

我必须创建一个具有不同高度的3个div的行,但它们都必须与行的底部对齐,并且行必须是最高子div的高度。 这是我的意思的一个例子。 http://cl.ly/997cd739550635df3bbf 这是我的尝试: 但除非我设置.row的高度所有div2堆叠在彼此之上。
2回复

CSS自动高度Div不能正确定位自身

我试图获得一种简单的页面布局,其中导航栏沿用户窗口的右侧垂直放置,不超过可用空间的20%。 左侧剩余的80%空间用于内容。 我希望整个页面的大小都可以调整,因此无论浏览器窗口大小是多少(在一定程度上),内容都会根据用户的屏幕大小进行调整。 一切正常,并且调整大小很好,但是navBar存
1回复

将div内容拉伸到页面底部的固定位置页脚

我的页面由4div组成:顶部的标题,中间的是菜单div和content div,底部的是页脚div。 页脚应固定在屏幕底部。 我希望内容div从页眉div扩展到页脚div。 如果我用 然后将内容拉伸到页脚,但是此后再将内容拉伸到右侧。 请检查下面的代码。 我希望用红色显示的
2回复

在更改屏幕分辨率时修复div和内容

我正在设计一个网站,但面临一个重大问题。 问题是网站在我目前的分辨率上看起来很好。 但是一旦我开始在我的浏览器上放大或缩小(ctrl + +,ctrl + - ),页眉和页脚中的内容就会开始移动。 即使页面放大或缩小,我也希望导航项目和页脚内容保持其位置。 任何帮助将不胜感激。
3回复

css /将主要内容div定位在登录和注册div的右侧

我正在尝试创建一个带有页眉,页脚和三个div之间的页面。 现在看起来像这样: 这是我的HTML和CSS: index.php css / application.css 我已经尝试在主div上添加float: right ,由于某种原因,它将其浮动到了正确的位置,
1回复

调整浏览器窗口大小时重叠内容

这是我第一次在论坛上发帖,我绝不是Web开发人员,但我一直在学习。 我遇到的问题是http://www.audiofactory.co.uk 。 在某些页面上有音乐播放器。 使用Wordpress插件创建。 有关示例,请参见以下页面。 我已经为每个播放器编辑了一些CSS样
1回复

尝试刷新页面上的一个div内容而不更改div的位置

上面是一个完整的代码,它使AJAX在单击“显示内容”时调用,然后通过调用函数“ draw_pie”刷新div“ ajdiv4”的内容。 唯一的问题是,刷新时会将饼图一直向左移动。 我希望它保持不变并在当前位置进行更新。 如果您知道这里发生了什么,请提供帮助,谢谢。