Question

我有网页

www.turie.eu

底部有一些Facebook评论。我需要更改以动态更改高度并显示所有16条评论？

我试图改变每个单独的css选择器的高度，这些选择器与注释部分有关，从单个值到100％或自动，但没有效果。

谢谢！

Answer 1

这是因为：

#contenwrap {overflow: hidden}

当您删除此规则时，您将遇到一些其他设计问题需要解决，但您走的是正确的道路： - ）

更新！

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFF url(pozadie04.jpg) no-repeat scroll center top;
    margin: 0;
    padding: 0;
    color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;   /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
    width: 960px;
    margin: 280px auto 0; /* the auto value on the sides, coupled with the width, centers the layout */
    box-shadow: 0 0 40px black; /* Not supported in IE7 and IE8 */
}

.header {
    width:960px;
    height:280px;
    position:absolute;
    top:0;
}
.headerPic {position:absolute;}
.Logo {bottom: 35px; left:98px}
.Church {bottom: 0; right:70px}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {

    padding: 10px 0;
    background:rgba(255,255,255,0.9); /* Not supported in IE7 and IE8 */
    border:1px solid #fff;
}

.forum {
    height:130px;
}

.maps {
    height:523px;
}

.fb {
    width:600px;
    background: #FFF url(facebookcomments_nadpis.png) no-repeat left top;
    padding-top: 70px;
    margin-left:15px;
}

.mb {
    width:300px;
    background: url(mikroblog-nadpis.png) no-repeat left top;
    padding-top: 70px;
    margin-right:15px;
}

.footer {
    width:960px;
    height:237px;
    background: url(footer.png) no-repeat bottom;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">

<div class="header">
<img class="headerPic Logo"   src="maco07.png"   width="277" height="185" alt="Logo">
<img class="headerPic Church" src="kostol03.png" width="170" height="230" alt="church">
<!-- end .header --></div>

  <div class="content">

  <div class="forum">
    <p>Place your forum in this DIV</p>
  <!-- end .forum --></div>

  <div class="maps">
    <p>Place your Google Map in this DIV</p>
  <!-- end .maps --></div>

  <div class="hero">
  <h1>Vitajte!</h1>
  <p>Turie.eu je komunitný web s cieľom prezentovať obec Turie formou interaktívnych panoramatických fotografií. Vzhľadom na všeobecne nízku úroveň interaktivity na stránkach obcí, bude možnosť spoluvytvárať obsah Turie.eu jej návštevníkmi našou prioritou.</p>
  <p>Stránka funguje vo všetkých moderných prehliadačoch a v IE8+. Ak nájdete nejaké chyby, máte návrhy na zlepšenie, alebo sa chcete podieľať na vytváraní obsahu, napíšte nám.</p>
  <p>Chystané zmeny: užívateľská fotogaléria, kalendár udalostí, filtrovanie markerov, hlasovania, rezervácie..</p>
  <!-- end .hero --></div> 

  <div class="wrap">
  <div class="fb fltlft">
    <h2>Facebook </h2>
    <p>sdlkfjsdf kjsadf slkødfj sødlfkj sadlkfj sad flkj</p>
    <p>sdlkfjslkdjflksjdflkjsdf</p>
    <p>sdflkjsdlfkjsdlkfj</p>
    <p>sldkfjlkdsfj</p>
    <p>Float is cleared in this DIV</p>
    <!-- end .fb --></div>

  <div class="mb fltrt">
    <h2>Mikroblog</h2>
    <p>sdkfljøslkdfjlkjdsfølkj</p>
    <p>sdlkfjølskdjfølksjdf</p>
    <p>sdlkfjøsldkfjølskdfj</p>
    <p>sdlfkjøsldkfj</p>
    <p>sdlkfjøsldkfj</p>
    <p>sdflkjsdøflkj</p>
    <p>slskdjfølksdjf</p>
    <p>Float is cleared in this DIV</p>
    <!-- end .mb --></div>
  <br class="clearfloat">
  <!-- end .wrapper --></div>  
  <!-- end .content --></div>

  <div class="footer">
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Answer 2

您可以使用滚动div，使用css overflow property或overflow:auto进行滚动

Answer 3

这是针对rgba问题的IE修复。我在his site上使用了Kimili的生成器（很棒的工具）。

<!--[if IE]>
<style type="text/css">

{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF);   /* IE6 & 7 */
      zoom: 1;
}
</style>
<![endif]-->

如果显示更多注释，如何动态更改高度

3 个答案: