我有CSS位置问题。
基本上,我不知道外部div #contentarea
或子元素#mainarea
,#sidebar
是否存在问题。 #contentarea
具有恒定宽度,隐藏溢出,并包含#mainarea
& #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;
}